jquery - 在调用另一个函数之前执行一些函数

Question

我正在制作图像 slider 。当用户点击图片时:

1. 图片滑到前面
2. 在下一次点击时，图像被翻转并放大
3. 在下一次点击时图像恢复到原来的大小和位置

在选择其他图像时会发生相同的步骤。我想做的是:假设我选择了一张图片，图片翻转并放大了。然后我直接点击另一张图片，所以我想写一个函数，在放大新图片之前，第一张图片应该回到原来的大小和位置。

如何做到这一点？

    var status=1;
function flipIt(obj){
//$(obj).wrap("<div class='centerImage'></div>")



 console.log("value before Function status   "+status);

if(status==1)
{
alert("i am From JS IF part");
    $(obj).animate({"left": "-=30px","opacity": "0.65"},"slow");
    $(obj).animate({"height":"400px","width":"350px"},30);


  // initial        w295   h354
 $(obj).css("-webkit-transform-style","preserve-3d");
 $(obj).css("-webkit-transition","all 1.0s linear");
 $(obj).css("transform-style","preserve-3d");
 $(obj).css("transition","all 1.0s linear");

 $(obj).css("-webkit-transform","rotateY(180deg)");
 $(obj).css("transform","rotateY(180deg)");
 //$(obj).css("box-shadow","-5px 5px 5px #aaa");

 status=0;
 console.log("after if value set status   "+status);
}
else
{

//alert("i am From JS Else part");
    $(obj).animate({"left": "+=30px","opacity": "0.99"},"slow");
    $(obj).animate({"height":"354px","width":"295px"},30);

 $(obj).css("-webkit-transform-style","preserve-3d");
 $(obj).css("-webkit-transition","all 1.0s linear");
 $(obj).css("transform-style","preserve-3d");
 $(obj).css("transition","all 1.0s linear");


 $(obj).css("-webkit-transform","rotateY(0deg)");
 $(obj).css("transform","rotateY(0deg)");
 //alert("apply css");
    status=1;
    Removecss();

 console.log("ater else value set status   "+status);

}

Answer 1

如果我对你的理解正确，你的情况可以抽象为有一个事物列表，当用户选择其中一个事物时，它会发生一些事情(在这种情况下，图像被翻转和放大)。当用户选择列表中的另一个事物时，您想要重置第一个事物的效果。

实现此目的的一种方法是在所选内容上设置一个 css 类，例如，.flipped-and-enlarged。每当您随后转换列表中的任何对象时，首先对具有此类的任何对象执行反向操作:

function flipAndEnlarge(obj) {
    $('.flipped-and-enlarge').reverseFlipAndEnlarge();

    // do the rest of your stuff
}

这样，如果操作正确，任何时候都不会出现超过一张翻转和放大的图像。

---

请注意，在上面的代码示例中使用 .reverseFlipAndEnlarge() 需要将其编写为 jQuery 插件。这样做是 really easy和我强烈推荐的东西，但如果你真的不想，你可能会做类似 reverseFlipAndEnlarge($('.flipped-and-enlarged')) 的事情。