將動畫添加到此jQuery腳本

爲按鈕中的一組數據過濾器提供相當簡單的顯示/隱藏腳本。我一直在尋找關於如何爲轉換設置動畫的解決方案，但似乎無法看到這個腳本與jQuery網站上描述的不同。將動畫添加到此jQuery腳本

我在其他地方讀過CSS3動畫可能更容易或更好，但對我而言，這仍然是一個謎。

有一個簡單的修改這個腳本：

$('.toggle').click(function (event) { 
    event.preventDefault(); 
    var target = $(this).attr('href'); 
    $(target).toggleClass('hidden show'); 
});

來源

2016-02-25 kylebellamy

什麼樣的動畫你想要？淡入淡出/向下滑動/向右滑動？ – Taplar

「隱藏秀」後，您的代碼中出現錯誤，逗號錯誤。 – jcubic

糟糕的錯誤，遺漏了周圍，謝謝。只是一個向下滑動動畫。非常好奇，看看這是如何完成的。 – kylebellamy

而是改變類的，你可以使用內置的toggleX方法（例如toggle()和slideToggle()）。

如果你想做一些更花哨的事情，如動畫顏色，你需要看看animate方法，並可能包括jquery-ui，這是css3轉換可能更容易/更少的開銷，除非你已經包括jquery-ui。

$("#toggle").click(function() { 
    $("#target").toggle(500); 
}); 

$("#slide").click(function() { 
    $("#target").slideToggle(500); 
});

基本小提琴：https://jsfiddle.net/t2j03v6d/

來源

2016-02-25 16:34:50

我知道它必須簡單，但我找不到理解它的正確頁面。謝謝！ – kylebellamy

我不知道你要找的動畫，但在這裏我用slideToggle()（http://api.jquery.com/slidetoggle/）使用一些你已經代碼提供：https://jsfiddle.net/8gavvmnL/1/

HTML：

<a class="toggle" href="#pop">Click Me</a> 
<div id="pop"> 
    I'm hidden until the button is clicked! 
</div>

jQuery的：

$("#pop").hide(); 
$('.toggle').click(function (event) { 
    event.preventDefault(); 
    var target = $(this).attr('href'); 
    $(target).slideToggle(); 
});

來源

2016-02-25 16:34:33

將'slideDown（）'更改爲'slideToggle（）'以更好地匹配需求/操作代碼 –

$('.target').on('click', function() { 
 
    var $stuff = $(this).find('.stuff'); 
 
    
 
    if ($stuff.is(':visible')) { 
 
    $stuff.slideUp('slow'); 
 
    } else { 
 
    $stuff.slideDown('slow'); 
 
    } 
 
});

.target .stuff { 
 
    display: none; 
 
    
 
    height: 400px; 
 
    background-color: #F00; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 

 
<ul> 
 
    <li class="target"> 
 
    Show/Hide 
 
    <div class="stuff"></div> 
 
    </li> 
 
</ul>

來源

2016-02-25 16:36:07 Taplar

請提供您的答案解釋/評論，而不僅僅是代碼。 –

非常好！感謝您提供它的CSS版本。希望有多個正確的答案檢查。 – kylebellamy

將動畫添加到此jQuery腳本

回答

相關問題