javascript - 根据选择的选项运行 JQuery 动画

Question

我已经搜索了很多，并且确信之前有人需要这样做，如果这是重复的，我很抱歉。我把我认为是我可以在网上找到的最好的代码的汇编，并且无法得到任何工作。

我知道结构可能有问题，但有谁知道为什么这是错误的。

$(document).ready(function () {
  $("select[name='selector']").change(function () {
    $(this).children(':selected').hasClass('three') {
      $("#mover").animate({
        "left": "+=50px"
      });
    };
  });
});

活生生的例子。

Answer 1

有几件事：

1. 您需要的是条件if语句，这是语言的基础。
2. 只有在使用绝对定位时才考虑leftCSS 属性。

至于代码，

#mover {
    position: absolute;
}

$(document).ready(function () {
    var $selector = $("select[name='selector']"), $mover = $("#mover");
    $selector.change(function () {
        if ($selector.children(':selected').hasClass('three')) {
            $mover.animate({
                "left": "+=50px"
            });
        };
    });
});

你可以在这里看到它。

Answer 2

$(document).ready(function() {
    $("select[name='selector']").change(function() {
        if($(".three:selected",this).length>0){       
            $("#mover").animate({"left": "+=50px"});
        };
    });
});

这里：http: //jsfiddle.net/kpT3b/

Answer 3

$(document).ready(function() {

$("select[name='selector']").change(function() {

    if($(this).find('option:selected').text() == "three"){

        $("#mover").animate({"left": "+=50px"});

    }
});
});