javascript - 即使调用成功，我的 jquery 动画功能也无法工作

Question

有使用过 jquery 和 javascript 的人请向我解释为什么这段代码不起作用？
当 changeclass 被触发时，图像 previmage 应该先扩大然后缩小，但它似乎也没有这样做。唯一起作用的是底部的警报。

有任何想法吗？

<script type="text/javascript">
function changeclass()
{
    if ($("#previmage").css({"max-width" : "400px"}){
        $("#previmage").animate({"max-width": "100%"}, "fast");
        $("#previmage").addClass("clicked").removeClass("normal");
    }else{
        $("#previmage").animate({"max-width": "400px"}, "fast");
        $("#previmage").addClass("normal").removeClass("clicked");       
    }
    alert("called");    
}
$("#progressBar").hide();
</script>

最好的问候乔丹日尼贾

Answer 1

if ($("#previmage").css({"max-width" : "400px"})

确实设置了max-width属性并返回始终真实的 jQuery 包装器对象。您需要将该.css()方法用作 getter 并将结果与​​预期值进行比较：

if ($("#previmage").css("max-width") == 400)

但是，我建议不要将您的应用程序逻辑基于 css 样式。hasClass如果您需要/想要将其存储在 DOM 中，请使用变量来保存状态，或使用类（可以使用 测试）。

Answer 2

如果要增加图像使用宽度的大小，最大宽度仅允许特定类允许的最大宽度

if ($("#previmage").css({"width"}==400){
         $("#previmage").animate({width:"100%"}, "fast");
         $("#previmage").addClass("clicked").removeClass("normal");
        }
else{
             $("#previmage").animate({width: 400}, "fast");
             $("#previmage").addClass("normal").removeClass("clicked");

        }