Question

我花了两天时间在一个新网站的首页上工作，但这些功能我无法工作。

最好查看此链接。

http://isca01.bigwavemedia.info/~stagedgo/html/

当你将鼠标悬停在促销上时，页面会向左推20px，但是当按下滑块时，当你再次将鼠标悬停在它上面时，它应该向右推20 px。

我使用下面的代码，它的工作方式是检查包装器是否被按下。

if ($('.wrapper').css('marginLeft') ==  "0px") {
          //code to push page left 20
     }
 if ($('.wrapper').css('marginLeft') >  "1px") {
          //code to push page right 20
     }

任何帮助都会很棒，谢谢。

Answer 1

作为Eugene所说的更新，你应该可以使用它：

if (parseInt($('.wrapper').css('margin-left').replace('px', '')) ==  0) {
      //code to push page left 20
}
if (parseInt($('.wrapper').css('margin-left').replace('px', '')) >=  20) {
      //code to push page right 20
}

这将确保返回的值是一个整数，并且您实际上得到左边距的值而不是'marginLeft'，这不是有效的属性。

编辑：刚刚注意到我错过了一个结束括号，但代码适用于我。我已经对jsfiddle here进行了测试（只需将margin-left值更改为适当的值以查看框更改颜色）

Answer 2

您不能在非数字的东西上使用“超过”运算符。

试试这个：

if ($('.wrapper').css('marginLeft') ==  "0px") {
      //code to push page left 20
} else {
      //code to push page right 20
}

或者，你可以传递没有“px”的数字进行比较：

if (parseInt($('.wrapper').css('marginLeft')) ==  0) {
      //code to push page left 20
}
if (parseInt($('.wrapper').css('marginLeft')) >=  20) {
      //code to push page right 20
}

修改

用此替换整个悬停代码（从第200行到第243行）。基本上，当保证金为0时，将其减去右边，当保证金不为0时，将其减去左边。这可以解决您的问题。

$(".show_hide").hover(function() { if(parseInt($(".wrapper").css('marginLeft')) == 0) { $(".wrapper").animate({ right: -20, opacity: 1 }, 300); } else { $(".wrapper").animate({ left: -20, opacity: 1 }, 300); }; }, function() { $(".wrapper").animate({ right: 0, left: 0, opacity: 1 }, 300); });

Answer 3

您的JavaScript代码是：

$(document).ready(function(){

// some code here

$('.show_hide').toggle(function(){
  // some code here
},
function() {
  // some code here
});

if ($('.wrapper').css('marginLeft') ==  "0px") {
  $(".show_hide").hover(function () {
    $(".wrapper").animate({ left: 20, opacity : 1 }, 300);
  },
  function () {
    $(".wrapper").animate({ left:0, opacity : 1 }, 300);
  })
}
else if ($('.wrapper').css('marginLeft') > "1px") {
  $(".show_hide").hover(function () {
    $(".wrapper").animate({ right:20, opacity : 1 },300);
  },
  function () {
    $(".wrapper").animate({ right:0, opacity : 1}, 300);    
  })
}           
});

您可以在此处看到的是，您在文档准备好后定义了一次“悬停”行为。

而你应该做的是在'toggle'事件中重新定义这种行为。

我建议您改用此代码：

function setupHoverBehaviour() {
  var marginValue = $('.wrapper').css('marginLeft');
  if ( marginValue ==  "auto" || parseInt(marginValue) == "0" ) {
    $(".show_hide").hover(function () {
      $(".wrapper").animate({ left: 20, opacity : 1 }, 300);
    },
    function () {
      $(".wrapper").animate({ left:0, opacity : 1 }, 300);
    })
  }
  else {
    $(".show_hide").hover(function () {
      $(".wrapper").animate({ right:20, opacity : 1 },300);
    },
    function () {
      $(".wrapper").animate({ right:0, opacity : 1}, 300);  
    })
  }
}

$(document).ready(function(){

  // some code here

  $('.show_hide').toggle(function(){
    // some code here

    setupHoverBehaviour();
  },
  function() {
    // some code here

    setupHoverBehaviour();
  });

  setupHoverBehaviour();

});

Answer 4

我会在click事件或click事件的触发器元素上添加一个类，以指示它已被推送。然后你可以在任何一个元素上使用.hasClass（“推”）来确定它是否需要向左或向右滑动。

Jquery如果，Else Slider

4 个答案: