如何使幻灯片和淡入淡出效果比addClass

我想创建一个基于jQuery的幻灯片和淡入淡出效果。在添加功能addClass之前，一切正常。但是在添加这个类后，幻灯片和淡入淡出效果消失。如何使幻灯片和淡入淡出效果比addClass

当我在FadeSlideToggle.call(box)之后添加addClass('hide')时，javascript效果消失。

有人可以帮助我吗？下面是代码：

<html> 
<head> 
    <style type="text/css"> 
     .box { 
      background: red; 
      width: 400px; 
      position: relative; 
      margin-left: auto; 
      margin-right: auto; 
     } 

     .hide { 
      display: none; 
     } 

    </style> 
</head> 
<body> 
    <div class="box"> 
     <h2>Some Content Here</h2> 
     <p> 
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
     </p> 
    </div> 
    <p><button>FadeSlideToggle</button></p> 


    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
    <script type="text/javascript"> 

      var box = $('div.box'); 

      function FadeSlideToggle(){ 

       return $(this).animate({ 
        opacity: 'toggle', 
        'height': 'toggle' 
       }, 2000); 
      }; 

      $('button').on('click', function(){ 
       FadeSlideToggle.call(box); 
      }); 

    </script> 
</body> 
</html><html> 
<head> 
    <style type="text/css"> 
     .box { 
      background: red; 
      width: 400px; 
      position: relative; 
      margin-left: auto; 
      margin-right: auto; 
     } 

     .hide { 
      display: none; 
     } 

    </style> 
</head> 
<body> 
    <div class="box"> 
     <h2>Some Content Here</h2> 
     <p> 
      Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
     </p> 
    </div> 
    <p><button>FadeSlideToggle</button></p> 


    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
    <script type="text/javascript"> 

      var box = $('div.box'); 

      function FadeSlideToggle(){ 

       return $(this).animate({ 
        opacity: 'toggle', 
        'height': 'toggle' 
       }, 2000); 
      }; 

      $('button').on('click', function(){ 
       FadeSlideToggle.call(box); 
      }); 

    </script> 
</body> 
</html>

来源

2014-02-16 Jusleong

'addClass'立即生效，它不像动画方法那样排队。 – Barmar

@Barmar我怎样才能使幻灯片和淡入淡出效果，然后addClass – Jusleong

使用完整的回调

var box = $('div.box'); 

function FadeSlideToggle(callback){ 

    return $(this).animate({ 
     opacity: 'toggle', 
     'height': 'toggle' 
    }, 2000, callback); 
}; 

$('button').on('click', function(){ 
    FadeSlideToggle.call(box, function() { 
     //do something you want 
    }); 
});

来源

2014-02-16 06:58:34 dongseok0

感谢LowerClassOverflowian

其中一个解决办法是使用jQuery UI。

<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/ui/1.10.4/jquery-ui.js"></script> 
    <script type="text/javascript"> 

      var box = $('div.box'); 

      function FadeSlideToggle(speed){ 

       return $(this).animate({ 
        'opacity': '0', 
        'height': 0 
       }, speed || 2000); 
      }; 

      $('button').on('click', function(){ 
       FadeSlideToggle.call(box, 5000).addClass('hide', { 
        queue: true 
       }); 
      }); 

    </script>

来源

2014-02-16 06:59:00 Jusleong

如何使幻灯片和淡入淡出效果比addClass

回答

相关问题