Question

我正在构建一个导航功能，该功能与w3schools（https://www.w3schools.com/howto/howto_css_sidenav_buttons.asp）中可悬停的sidenav按钮菜单相似。我正在配置此功能以采用jQuery插件的形式。到目前为止，我已经成功启用了插件的初始化功能并可以访问已建立的选项。我已将插件设置为默认情况下与屏幕右侧对齐。虽然将选项卡与屏幕左侧对齐很简单（切换左右像素值），但我想实现一个功能，当选项卡向左对齐时，该功能可以反转悬停幻灯片的方向。换句话说，选项卡在定位到屏幕左侧时应从左向右滑动。我尝试使用jQuery UI小部件工厂函数来实现此功能，并使用条件语句来反转JS部分顶部的mouseover和mouseout方法中动画的方向，但无济于事。关于如何实现这一目标的任何建议？请参见下面的代码。非常感谢！

    <div id="block1" class="block"></div>
    <div id="block2" class="block"></div>
    <div id="block3" class="block"></div>
    <div id="block4" class="block"></div>

    <script>

      $("#block1").slideHover({
        backgroundColor: "#2196F3"
      });

      $("#block2").slideHover({
        top: 120,
        backgroundColor: "#F1C40F"
      });

      $("#block3").slideHover({
        top: 180,
        backgroundColor: "#f44336"
      });

      $("#block4").slideHover({
        top: 240,
        backgroundColor: "#555"
      });
    </script>

$(document).ready(function(){
  $(".block").mouseover(function() {
    $(this).animate({ "right": "+=50px" }, 150 );
  });
  $(".block").mouseout(function() {
    $(this).animate({ "right": "-=50px" }, 150 );
  });
});

(function ( $ ) {

    $.fn.slideHover = function(options) {

        var settings = $.extend({
          position: "fixed",
          backgroundColor: "#abc",
          padding: "25px",
          left: "",
          right: "-95px",
          width: "100px",
          borderRadius: 5,
          top: "60px"
        }, options );

        return this.css({
          position: settings.position,
          backgroundColor: settings.backgroundColor,
          padding: settings.padding,
          left: settings.left,
          right: settings.right,
          width: settings.width,
          borderRadius: settings.borderRadius,
          top: settings.top
        });
    };


}( jQuery ));

如何使我的jQuery插件具有高级方法

0 个答案: