更改隐藏显示切换效果？

Question

我有一个可以与下面的代码一起正常工作的元素。 ＃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”）；）

Answer 1

这是一个使用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或您喜欢的位置时触发

编辑-根据您上面的评论，我已经编辑了笔，因此现在元素将在页面加载时隐藏，然后将类删除并添加动画类。

Answer 2

您最好将样式保留在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> 

Answer 3

$(document).ready(function() {
$("#obj1").hide();
$("#obj2").show();
});

$('#obj2').toggle(function(){
$("#obj1").slideToggle();
});

当按下obj2时，将通过滑动显示obj1 。 要使其淡入，请尝试，

$("#obj2").click(function () {
$("#obj1").fadeToggle("slow","swing");

这将切换obj1淡入和淡出。

参考： http : //api.jquery.com/fadetoggle/

Answer 4

这个问题有点困惑，但是这是我尝试的答案：希望它会有所帮助

 $(".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>