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 / fade-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});
                       });

jQuery在点击时执行Fade Transition？

1 个答案: