Выполните некоторые функции перед вызовом другой функции

Question

Я создаю слайдер изображения. Когда пользователь нажимает на изображение:

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')).

Answer 2

попробуйте объявить переменную, которая будет содержать имя, класс или идентификатор текущего просматриваемого/увеличенного изображения, а затем вызвать его, прежде чем второе изображение щелкнет следующим образом.

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

и на если попытаться положить другой, если проверить, если переменная, которая содержит предыдущий Аттрибут изображение пуст, как этот

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

Надеюсь, что это поможет вам .. :) ура .. ..