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");
});

我希望它能够淡入，但是如何将动画添加到第一个脚本？（动画ex：.animate（{“opacity”：“1”，“bottom”：“140”}，“slow”）;）

Answer 1

这是一个使用CSS淡化元素的超级简单演示。您可以使用jQuery通过单击事件添加类。

// 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");

您可以看到有效的演示here。你只需要修改它就可以点击obj2或你喜欢的地方触发

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

Answer 2

你最好将样式保存在css中，只使用js来改变状态（添加/删除一个类）。你拥有javascript的方式是可以接受的，但是根据自己的要求切换课程会更好，这样他们就不会意外地失去同步：

＆＃13;

$('#obj2').on('click',function(e){
  e.preventDefault();
  if($('#obj1').hasClass('js-on'))
    $('#obj1').removeClass('js-on');
  else
    $('#obj1').addClass('js-on');
});

＆＃13;

    #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;
    }

＆＃13;

<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>

＆＃13;

Answer 3

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

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

当按下obj1时，这将通过滑动显示obj2。让它淡入而不是尝试，

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

这会切换obj1淡入淡出。

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

Answer 4

对这个问题稍微感到困惑，但这是我尝试回答：希望有所帮助

include dirname(dirname(__FILE__)).'/_include/config.php';
// is equivalent to:
include dirname(__FILE__).'/../_include/config.php';

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

更改隐藏显示切换效果？

4 个答案: