[英]Changing the hide show toggle effect?
I have an element that works just fine with the following code. 我有一个可以与下面的代码一起正常工作的元素。 It's an object #obj1 that is hidden when loading the page, but appears when clicking on #obj2.
#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(){});
});
but I would like to have it like this: 但我想这样:
$("#obj1").css({"opacity": "0","bottom": "180"})
$("#obj2").toggle(
function () {
$("#obj1").animate({"opacity": "1","bottom": "140"}, "slow");
},function () {
$("#obj1").animate({"opacity": "0","bottom": "180"}, "slow");
});
I would like it to fade in, but how do I add the animation to the first script? 我希望它淡入淡出,但是如何将动画添加到第一个脚本中呢? (animation ex: .animate({"opacity": "1","bottom": "140"}, "slow");)
(动画:.animate({“ opacity”:“ 1”,“ bottom”:“ 140”},“ slow”);)
Here is a super simple demo of fading in an element using CSS. 这是一个使用CSS淡化元素的超简单演示。 You can use jQuery to add the class through a click event.
您可以使用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");
You can see a working demo here . 您可以在此处查看有效的演示。 You'll just have to modify it to trigger on click of obj2 or where you like
您只需对其进行修改,以在单击obj2或您喜欢的位置时触发
EDIT - As per your comment above I have edited the pen, so now the element will be hidden on page load and then the class will be removed and the animation class added. 编辑-根据您上面的评论,我已经编辑了笔,因此现在元素将在页面加载时隐藏,然后将类删除并添加动画类。
You would be best keeping the styles within css, and just using js to change the state (add/remove a class). 您最好将样式保留在CSS中,并仅使用js更改状态(添加/删除类)。 The way you have the javascript is passable, but it'd be better for the class to be toggled based on itself so they can't accidentally get out of sync:
您拥有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();
});
This will show obj1
by sliding when obj2
is pressed. 当按下
obj2
时,将通过滑动显示obj1
。 To have it fade in instead Try, 要使其淡入,请尝试,
$("#obj2").click(function () {
$("#obj1").fadeToggle("slow","swing");
This toggles obj1
fading in and out. 这将切换
obj1
淡入和淡出。
reference: http://api.jquery.com/fadetoggle/ 参考: http : //api.jquery.com/fadetoggle/
Slightly confused by the question, but here's my attempt at an answer: hope it helps 这个问题有点困惑,但是这是我尝试的答案:希望它会有所帮助
$(".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.