[英]Changing the hide show toggle effect?
我有一個可以與下面的代碼一起正常工作的元素。 #obj1對象是在加載頁面時隱藏的,但在單擊#obj2時顯示。
#obj1{
position:fixed;
width:100px;
bottom:180px;
right:100px;
display:none;
}
$("#obj1").hide();
$("#obj2").show();$('#obj2').toggle(function(){
$("#obj1").slideDown(function(){});
},function(){
$("#obj1").slideUp(function(){});
});
但我想這樣:
$("#obj1").css({"opacity": "0","bottom": "180"})
$("#obj2").toggle(
function () {
$("#obj1").animate({"opacity": "1","bottom": "140"}, "slow");
},function () {
$("#obj1").animate({"opacity": "0","bottom": "180"}, "slow");
});
我希望它淡入淡出,但是如何將動畫添加到第一個腳本中呢? (動畫:.animate({“ opacity”:“ 1”,“ bottom”:“ 140”},“ slow”);)
這是一個使用CSS淡化元素的超簡單演示。 您可以使用jQuery通過click事件添加類。
// HTML
<div id="myId" class="hide">
This is div with myId
</div>
// CSS
.hide {
display: none;
}
.myId {
animation: fadein 2s;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
// JQUERY
$("#myId").removeClass("hide").addClass("myId");
您可以在此處查看有效的演示。 您只需對其進行修改,以在單擊obj2或您喜歡的位置時觸發
編輯-根據您上面的評論,我已經編輯了筆,因此現在元素將在頁面加載時隱藏,然后將類刪除並添加動畫類。
您最好將樣式保留在CSS中,並僅使用js更改狀態(添加/刪除類)。 您擁有javascript的方式是可以通過的,但是最好根據類本身來切換類,這樣它們就不會意外脫離同步:
$('#obj2').on('click',function(e){ e.preventDefault(); if($('#obj1').hasClass('js-on')) $('#obj1').removeClass('js-on'); else $('#obj1').addClass('js-on'); });
#obj1{ position:absolute; width:100px; bottom:10px; right:20px; opacity: 0; background-color: yellow; padding: 1em; transition: .5s opacity, .5s bottom; } #obj1.js-on { opacity: 1; bottom: 40px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <a id="obj2" href="#">Click me</a> <div id="obj1">Hi</div>
$(document).ready(function() {
$("#obj1").hide();
$("#obj2").show();
});
$('#obj2').toggle(function(){
$("#obj1").slideToggle();
});
當按下obj2
時,將通過滑動顯示obj1
。 要使其淡入,請嘗試,
$("#obj2").click(function () {
$("#obj1").fadeToggle("slow","swing");
這將切換obj1
淡入和淡出。
這個問題有點困惑,但是這是我嘗試的答案:希望它會有所幫助
$(".obj1").click(function(){ $(".obj2").css('opacity', 0) .slideDown('slow') .animate( { opacity: 1 }, { queue: false, duration: 'slow' } ); });
.obj1 { display: inline-block; padding: 10px; background: lightgrey; } .obj2 { height: 100px; width: 100px; background: red; display:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <div class="obj1">click me</div> <div class="obj2"></div>
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.