如何使幻燈片和淡入淡出效果比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

回答

相關問題