頁面滾動後出現jQuery slideUp錯誤

我遇到了jQuery的slideUp和slideDown函數的一些問題。如果你去這個網站頁面滾動後出現jQuery slideUp錯誤

www.confide.re/confide

，並點擊其中一個框，它通常工作正常，但您滾動頁面，之後它加載一些箱子，然後滑動功能的bug和做了兩次無緣無故，如果你明白我的意思。

這是我在某處做錯了什麼，或者這是一個已知的錯誤？

由於

下面是代碼：

var state = 'down'; 

$('.overlay').click(function() { 

    if(state == 'down') { 
     $(this).next().slideDown(155); 
     state = 'up'; 
    } else { 
     $(this).next().slideUp(150); 
     state = 'down'; 
}

.overlay是在每個盒的頂部上的透明的div。

來源

2012-12-29 Taimur

你真的還需要張貼您的代碼，否則我們不會知道直接的問題是什麼。 – Chanckjh

編輯，謝謝:) – Taimur

這是不一樣的代碼在您的網站上。 Infinitysroll.js，第50行：代碼被調用兩次。 – sdespont

定義您click事件的阿賈克斯成功回調外像這樣（使用更好的選擇是body，它只是一個例子）

$("body").on("click", ".overlay", function(e){ 
    $(this).next().slideToggle(150); 
    $(this).css('background-color', 'rgba(0,0,0,0)'); 
});

來源

2012-12-29 18:01:17 sdespont

非常感謝，我會給出一個去:)'e'做什麼？ – Taimur

它不再有錯誤！非常感謝你 – Taimur

「e」是事件對象：http://api.jquery.com/category/events/event-object/ – sdespont

你應該做這樣的事情：http://jsfiddle.net/chanckjh/Jak6Q/

HTML：

<div class="something"> 
    <div class="bar"> 

    </div> 
</div>

的jQuery：

$(function() { 
    $('.something').click(function() { 
     $('.bar').slideToggle(); 
    }); 
});

CSS：

.something{ 
    width: 500px; 
    height: 500px; 
    border: 1px solid red; 
} 
.bar{ 
    display: none; 
    width: 500px; 
    height: 50px; 
    background: blue; 
}

或像這樣的孩子： http://jsfiddle.net/chanckjh/Jak6Q/1/

$(function() { 
    $('.something').click(function() { 
     $(this).find('.bar').slideToggle(); 
    }); 
});

來源

2012-12-29 17:51:48 Chanckjh

感謝您的答覆，我曾經使用slideToggle但遇到同樣的問題，所以我認爲切換到slideUp和slideDown可以解決它，但可惜這兩個方法 – Taimur

您不能共享單個變量state這當中需要記錄他們的具體身份的許多元素。相反，你必須保持每個元素的狀態。

來源

2012-12-29 17:59:32 coderLMN

頁面滾動後出現jQuery slideUp錯誤

回答

相關問題