Question

我正在制作图像滑块。当用户点击图片时：

图片幻灯片放在前面
在下一次点击时，图片被翻转并放大
在下一次单击时，图像将返回其原始大小和位置

在选择其他图像时，会发生相同的步骤。我想要做的是：假设我选择一个图像，图像翻转和放大。然后我直接点击另一个图像，所以我想写一个功能，在放大新图像之前，第一个图像应该恢复到原来的大小和位置。

怎么做？

    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'))之类的事情。

Answer 2

尝试声明一个变量，该变量将保存当前查看/放大图像的名称，类或ID，然后在第二个图像点击之前调用它。

 var previousImage = $(this).attr('class');

并在if尝试放另一个if来检查保存前一个'image attr的变量是否为空

 if(yourFirstStatement){
    if(previousImage != ''){
        //doTheResetOfImageSize();
     }
   //doYourImageChangeSizeAndOtherAnimationThing..
 }

希望这能帮到你.. :) 欢呼声....

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

2 个答案: