0

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

最好查看此链接。

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

当您将鼠标悬停在促销活动上时，页面向左推 20 像素，但是当单击滑块时，当您再次将鼠标悬停在它上面时，它应该向右推 20 像素。

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

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

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

4

4 回答 4

3

作为尤金所说的更新，您应该能够使用它：

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 进行了测试（只需将 margin-left 值更改为适当的值以查看框更改颜色）

于 2012-11-01T16:49:20.770 回答
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);

});
于 2012-11-01T16:35:53.187 回答
1

您的 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);    
  })
}           
});

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

而您应该做的是在“切换”事件期间重新定义此行为。

我建议您改用此代码：

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();

});
于 2012-11-01T16:55:43.237 回答
0

我会在包装器或 click 事件上的触发器元素中添加一个类，以指示它已被推送。然后，您可以在任何元素上使用 .hasClass("pushed") 来确定它是否需要向左或向右滑动。

于 2012-11-01T16:34:12.633 回答