jquery - 如何玩.animate（）一次，並用其他按鈕重置它

我正在製作一個網站，其中一些div滑動到屏幕上。如何讓已經在前面的div在按下相應的按鈕時不播放動畫？jquery - 如何玩.animate（）一次，並用其他按鈕重置它

我設立了jQuery像這樣每個格：

$(button).click(function(event) { 
    $(div).css("right", "-100%"); 
    $(div).animate({right: '0%'}); 
    $(div).css("z-index", "1"); 
    $(other-div).css("z-index", "0"); 
});

我需要做的「隱藏」 div的播放動畫，使他們走到了前面。如果div已經在前面，我只是不希望動畫播放。

這裏是什麼，我有一個小提琴：好像是這樣）

https://jsfiddle.net/cn6goeuq/

我曾嘗試使用.delay（：

$(button).click(function(event) { 
    $(div).animate({right: '0%'}); 
    $(div).css("z-index", "1"); 
    $(other-div).css("z-index", "0"); 
    $(other-div).delay(2000).css("right", "-100"); 
});

，使隱藏的div會回到「右：-100％'未被注意到，但它不起作用。不知道爲什麼。

我也嘗試使用一個變量來幫助我激活和停用正在顯示的div的動畫，但也是徒勞的。我想是這樣的：

var x = 0; 
var y = 0; 

    $(button1).click(function(event1){ 
     $(div1).animate({right: '0%'}); 
    x++; 
    y=0; 
    if (x >= 1) { 
     $(this).off(event1); 
    } 
    }); 

    $(button2).click(function(event2){ 
     $(div2).animate({right: '0%'}); 
    y++; 
    x=0; 
    if (y >= 1) { 
     $(this).off(event2); 
    } 
    });

我想使事件1工作只有一次按下按鈕1時，如果按下另一個按鈕復位，但它也沒有工作。

我跑出瞭如何解決這個問題的想法！

編輯

恐怕使動畫的條件並沒有正常工作。我有完全一樣的結果。我試着根據z-index做出條件。就像這樣：

$(button).click(function(event) { 
    if($(div).css('z-index') !== '0'){ 
    $(div).css("right", "-100%"); 
    $(div).animate({right: '0%'}); 
    }; 
    $(div).css("z-index", "1"); 
    $(other-div).css("z-index", "0"); 
});

來源

2017-02-26 JoseSoares

我想你可以只作動畫條件的是否已經有一個CSS屬性等於right: 0%像這樣：

$(button).click(function(event) { 
    if($(div).css('right') != '0px'){ 
    $(div).css("right", "-100%"); 
    $(div).animate({right: '0%'}); 

    }; 
});

編輯：
初始if-statement錯誤，因爲jQuery .css返回帶有後綴「px」的值，之前它試圖與「0％」匹配。

這裏有一個更新的小提琴解決if語句的問題，並允許應用不同的z-index元素之間進行切換：如果你想要一個事件只適用於一次性使用https://jsfiddle.net/cn6goeuq/3/

來源

2017-02-26 21:13:54

恐怕有條件地製作動畫不起作用。我有完全一樣的結果。我也試着根據z-index做出條件。像這樣： $（button）.click（function（event）{if（$（div）.css（'z-index'）！=='0'）{ $（div）.css（「 $（div）.css（「z-index」，「1」）; $（other-div）.css（「z-index」，「0」）; }）; – JoseSoares

@JoseSoares這個小提琴能解決你的問題嗎？ https://jsfiddle.net/cn6goeuq/2/ –

@ Chris.s是的，它的工作完美。原來我以某種方式錯誤地使用了它。我只是使用z-index作爲條件，因爲它在網站本身的整個div中更加一致。我在上次編輯中使用了我在問題中發佈的代碼，但只做了輕微更改。 – JoseSoares

一個上就像但只有一次：

$(document).ready(function() { 
 

 
function animateRed(){ 
 
    $("#redDiv").animate({ 
 
     right: '0%' 
 
    }); 
 
    $("#redDiv").css("z-index", "1"); 
 
    $("#yellowDiv").css("z-index", "0"); 
 
} 
 
    
 
function animateYellow(){ 
 
    $("#yellowDiv").css("right", "-100%"); 
 
    $("#redDiv").delay(1000).css("right", "-100%"); 
 
    $("#yellowDiv").animate({right: '0%' }); 
 
    $("#yellowDiv").css("z-index", "1"); 
 
    $("#redDiv").css("z-index", "0"); 
 
} 
 

 
    $("#redButton").one('click', function() { 
 
    animateRed() 
 
    }); 
 

 
    $("#yellowButton").one('click', function() { 
 
    animateYellow();  
 
    }); 
 
    
 
    $("#yellowButton").click(function(){ 
 
    $("#redButton").one('click', function() { 
 
    animateRed() 
 
    }); 
 
    }) 
 
    
 
    $("#redButton").click(function(){ 
 
    $("#yellowButton").one('click', function() { 
 
    animateYellow() 
 
    }); 
 
    }) 
 

 
    $("#back").click(function(event) { 
 
    $("#yellowDiv").animate({ 
 
     right: '-100%' 
 
    }); 
 
    $("#redDiv").animate({ 
 
     right: '-100%' 
 
    }); 
 
    $("#yellowDiv").css("z-index", "0"); 
 
    $("#redDiv").css("z-index", "0"); 
 
    $("#yellowButton").one('click', function() { 
 
    animateYellow() 
 
    }); 
 
    $("#redButton").one('click', function() { 
 
    animateRed() 
 
    }); 
 
    
 
    }); 
 

 
});

#redDiv { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 50px; 
 
    right: -100%; 
 
    background-color: red; 
 
    z-index: 0; 
 
} 
 

 
#yellowDiv { 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 50px; 
 
    right: -100%; 
 
    background-color: yellow; 
 
    z-index: 0; 
 
}

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script> 
 

 
<body> 
 

 
    <div id="redButton">RED</div> 
 
    <div id="yellowButton">YELLOW</div> 
 
    <div id="back">BOTH BACK</div> 
 
    <div id="redDiv"></div> 
 
    <div id="yellowDiv"></div> 
 

 
</body>

來源

2017-02-26 21:15:58

我也考慮過這個選項，但是我需要能夠按照我想要的次數播放它。我只是不想在div位於「前面」時播放動畫。 – JoseSoares

如果您可以看到我發佈的小提琴，當您按下RED時，它會播放動畫，您可以看到紅色的div。但是，如果再次按RED，則會再次播放動畫，但不需要。我希望這是有道理的 – JoseSoares

請看看最後更新。 –

在我最後的編輯中，我犯了一個錯誤。答案很簡單：

$(button).click(function(event) { 
    if($(div).css('z-index') !== '1'){ 
    $(div).css("right", "-100%"); 
    $(div).animate({right: '0%'}); 
    }; 
    $(div).css("z-index", "1"); 
    $(other-div).css("z-index", "0"); 
}); 


$(other-button).click(function(event) { 
    if($(other-div).css('z-index') !== '1'){ 
    $(other-div).css("right", "-100%"); 
    $(other-div).animate({right: '0%'}); 
    }; 
    $(other-div).css("z-index", "1"); 
    $(div).css("z-index", "0"); 
});

從我的理解它基本上是說「如果div的z-index的不是1它播放的動畫」，這正是我一直在尋找。

@Chris給出了答案，但我將其轉發以供將來參考的說明

來源

2017-02-26 22:18:47 JoseSoares

jquery - 如何玩.animate（）一次，並用其他按鈕重置它

回答

相關問題