Jquery数学

Question

我在一个数学题上有困难。对于if语句，我不确定这是否是正确的写作方式？它不起作用了，所以我想它不起作用。如何编写if语句来处理代码？

var count = $("#hugewidth li").length;

if($( '#hugewidth' ).css("margin-left") < '-1280*(count-1)'){   

     $('#hugewidth').animate({'margin-left' : '0'});

}

Answer 1

尝尝这个

   function animateMargin() {
     var count = $("#hugewidth li").length;
     var num = Number($( 'ul' ).css("margin-left").replace(/px|pt|cm|em/g,"")); 
     if (num < 1200 * (count-1)) {   
       return $("#hugewidth").animate({marginLeft : '0px'}, 3000);
     };
   };
   animateMargin();

在最初的post -1200 * (count-1)中，count是一个可能的正数，例如5，其结果将是-1200 * (5-1)或-4800。在这种情况下，如果num或css margin-left属性是任何正“数字”，那么预期的结果将不是<或less than -4800。接下来，if语句计算将返回false，.animate()函数不会被调用。

此外，没有为duration函数设置.animate()。在上面的示例中，删除了css margin-left属性的px (或其他可能存在的有效值)，该值为cast作为Number，- (数学负号或符号)从if语句中删除，并为.animate()函数设置了3000的持续时间。

jsfiddle http://jsfiddle.net/guest271314/7S9j7/

编辑(更新)

我只想让李在2秒后滑到下一个，但是，一旦最后的li显示出来，我希望它滑回第一个li元素。- Jacob读

快速浏览了一下http://www.read.ventures/源代码(html、css、js)。

1) html (现有)

<div id="hugewidth">
  <li class="wrap100 page" style="background: url('welcomeimage.png');"></li>
  <li class="wrap100 page" style="background: url('welcomeimage.png');"></li>
  <li class="wrap100 page" style="background: black; height: 340px;"></li>
</div>

看来，<li>元素在#hugewidh中并不在<ul>元素中。试试这个(html)

<div id="hugewidth">
  <ul>
  <li class="wrap100 page" style="background: url('welcomeimage.png');"></li>
  <li class="wrap100 page" style="background: url('welcomeimage.png');"></li>
  <li class="wrap100 page" style="background: black; height: 340px;"></li>
  </ul>
</div>

2) css (现有)

.wrap100 {
position: relative;
float: left; /* not certain if `float` property is required */
vertical-align: top;
overflow: hidden;
width: 1280px; /* `width` set to `1280px`, `animate` `marginLeft` to `-1300px` */
}

3) js (现有)

不确定$(window).bind()函数或width变量的要求或操作。另外，不确定click函数的效果如何？这里没有地址。也许适合一个单独的问题？为了达到本问题的要求，在main.js测试中省略了，以及最近的注释(上面)。

    $(window).bind('resize',function(){
      window.location.href = window.location.href;
    });
    var width = $(window).width();
    var hugewidth =                         
    $( "#slidernavi ul li:nth-child(1)" ).click(function() {
    $('#hugewidth').animate({'margin-left' : 0});
    $(this).css('background', '#62B3EB').siblings().css('background', '#B6B6B6');
    });
    $( "#slidernavi ul li:nth-child(2)" ).click(function() {
    $('#hugewidth').animate({'margin-left' : -1280});
    $(this).css('background', '#62B3EB').siblings().css('background', '#B6B6B6');
    });
    $( "#slidernavi ul li:nth-child(3)" ).click(function() {
    $('#hugewidth').animate({'margin-left' : -1280*2});
    $(this).css('background', '#62B3EB').siblings().css('background', '#B6B6B6');
    });

js (发表评论澄清效果的要求)

在main.js试试这个

$(document).ready(function() {          
function animateMargin(elem) {
  var elem = $("#hugewidth ul li").eq(0);
  $(elem).siblings().hide(0);
  return $(elem).fadeIn(1000).animate({marginLeft : '-1300px'}, 2000, function() {
    $(elem).css("marginLeft", "0px").appendTo("#hugewidth ul") && animateMargin()
  });
};animateMargin();   
}); 

jsfiddle http://jsfiddle.net/guest271314/CU3UB/

希望这能有所帮助

Answer 2

嗯..。恕我直言，'-1280*(count-1)'是一个字符串。如果您想要数学表达式，请删除引号。

Answer 3

if($( '#hugewidth' ).css("margin-left") < -1280*(count-1)){   
     $('#hugewidth').animate({'margin-left' : '0'});
}