jQuery在點擊時執行淡入淡出過渡？

Question

我從互聯網上下載了一個jQuery淡入淡出過渡插件。我想讓它在點擊時進行轉換，但我不知道如何修改。請幫忙。

在HTML開頭代碼

：

<script type="text/javascript"> 
     (function($) { 
     function init() { 
      $("#transitionEffect").fadeTransition({pauseTime: 4000, 
               transitionTime: 1000, 
               ignore: "#introslide", 
               delayStart: 4000, 
               manualNavigation: true, 
               pauseOnMouseOver: false, 
               createNavButtons: false}); 
     } 

     $(document).ready(init); 
     })(jQuery); 
</script> 

在JS /淡出plugin.js

(function ($) { 
    $.fn.fadeTransition = function(options) { 
    var transitionObject, 
     options = $.extend({pauseTime: 5000, 
          transitionTime: 2000, 
          ignore: null, 
          delayStart: 0, 
          pauseOnMouseOver: false, 
          manualNavigation: false, 
          createNavButtons: false}, options); 

    function fader(obj) { 
     var timer = null, 
      current = 0; 
      els = (options.ignore)?$("> *:not(" + options.ignore + ")", obj):$("> *", obj); 

     function setup() { 
     $(obj).css("position", "relative"); 
     els.css("display", "none").css("left", "0").css("top", "0").css("position", "absolute"); 



     if (options.delayStart > 0) { 
      setTimeout(showFirst, options.delayStart); 
     } 
     else { 
      showFirst(); 
     } 
     } 

     setup(); 



     function manualNav(e) { 
     var item; 
     e = e || window.event; 
     $(e.target).blur(); 
     item = $('.fadenav a', obj).index(e.target); 
     if (timer) { 
      clearTimeout(timer); 
     } 
     transition(item); 
     return false; 
     } 

     function pause() { 
     if (timer) 
      clearTimeout(timer); 
     } 



     function showFirst() { 
     if (options.ignore) { 
      $(options.ignore, obj).fadeOut(options.transitionTime); 
      $(els[current]).fadeIn(options.transitionTime, cue); 
     } 
     else { 
      $(els[current]).css("display", "block"); 
     } 

     } 

     function transition(next) { 
     $(els[current]).fadeOut(options.transitionTime); 
     $(els[next]).fadeIn(options.transitionTime); 
     current = next; 
     cue(); 
     } 

     function cue() { 
     if ($("> *", obj).length < 2) { 
      return false; 
     } 

     if (timer) { 
      clearTimeout(timer); 
     } 

     } 
    } 

    return this.each(function() { 
     new fader(this); 
    }); 
    } 

})(jQuery); 

Answer 1

您需要綁定的函數調用的事件。 如果transtionEffect是你想調用fadeTransition的元素：

$("#transitionEffect").click(function() { 
        $(this).fadeTransition({pauseTime: 4000, 
              transitionTime: 1000, 
              ignore: "#introslide", 
              delayStart: 4000, 
              manualNavigation: true, 
              pauseOnMouseOver: false, 
              createNavButtons: false}); 
         });