jquery hide div与CSS过渡效果

我有一个关于CSS隐藏过渡使用jQuery隐藏功能的问题。jquery hide div与CSS过渡效果

我创造了这个DEMO从codepen.io

在本演示中，你可以看到显示按钮。当你点击显示按钮，然后.test和.user-image div与CSS过渡效果开幕。

我想让它点击时隐藏按钮然后.test div与CSS过渡效果隐藏。

任何人都可以告诉我一个小例子我该怎么做？

CSS

<div class="container"> 
    <div class="usr">Show</div> 
    <div class="test"> 
    <div class="hide">Hide</div> 
    <div class="user-image" style="background-image:url(...);"></div> 
    </div> 

</div>

$(document).ready(function() { 
    $('.usr').click(function() { 
    $(".test").show(); 
    }); 
    $(".hide").click(function() { 
    $(".test").hide(); 
    }); 
});

来源

2015-05-17 innovation

我认为你有O写一个反向过渡类去解决它。 – Sree

在下面找到我的基于纯CSS的解决方案。没有Javascript或jQuery需要这个，只是智能使用可用的CSS选择器和相应的标记。此外，这适用于所有相关的浏览器 - 即使那些不支持转换的浏览器仍然会隐藏/显示“.test1”内容。即使在禁用JavaScript的情况下，它也可以工作。它演示了一种技术，您可以在**许多**案例中应用一次！ – connexo

@connexo我正在尝试使用Javascript，因为我想使用Ajax和PHP。 – innovation

如果你坚持使用jQuery，这是很容易实现的为好。在单独的css类中显示时，定义要过渡到的样式.show。将transition-duration: 0.5s;添加到.test。

然后

$(document).ready(function() { 
    $('.showHideToggle').click(function() { 
     var toggle= $(this); 
     if ($(".test").hasClass("show")) { 
      toggle.text("Hide"); 
      $(".test").removeClass("show"); 
     } 
     else { 
      toggle.text("Show"); 
      $(".test").addClass("show"); 
     } 
    }); 
});

来源

2015-05-17 19:46:40 connexo

谢谢你的不错的答案。我现在仍在尝试你的想法。但我仍然不想使用基于纯CSS的解决方案。 – innovation

我只能告诉你，如果你花时间去了解它的工作原理，那么你的css专有技术可能会获益匪浅。 – connexo

$('#id-of-your-div').fadeOut(); //fade out 

$('#id-of-your-div').fadeIn(); //fade in div

更多信息检查文档。

来源

2015-05-17 19:03:54

感谢您的回复。但我仍然尝试这个东西，但没有与CSS过渡效果一起工作。 – innovation

如果你想用div来隐藏jquery，你不需要css转换，只需将它淡入到我们或in中，但是如果你想将类转换为div，那么使用$（'＃id'）。addClass（'your -CSS级）; –

假设您实际上正在谈论字面CSS转换，请打开和关闭一个类。如果您希望它淡出然后显示none，则需要使用设置为在最后不显示任何内容的动画长度超时。转换无法实现关键帧。

$(document).ready(function() { 
    $('.usr').click(function() { 
    $(".test").css('display','block').removeClass('hidden'); 
    }); 
    $(".hide").click(function() { 
    $(".test").addClass('hidden'); 
    setTimeout(function(){ 
     $(".test").css('display','none')}, 500 //Animation Time 
    ) 
    }); 
});

.test{ 
    opacity:1; 
    transition:500ms cubic-bezier(0,0,0.58,1); 
    -webkit-transition:500ms cubic-bezier(0,0,0.58,1); 

} 
.hidden{ 
    opacity:0; 
}

来源

2015-05-17 19:10:29

你不需要的jQuery这个在所有。检查这个例子：

http://codepen.io/anon/pen/JdKWWW

.hide-show-element { 
 
    background-color: #eee; 
 
    height: 400px; 
 
    position: relative; 
 
    text-align: center; 
 
    width: 400px; 
 
} 
 

 
.hide-show-element input[type='checkbox'] { 
 
    display: none; 
 
} 
 
.hide-show-element label { 
 
    background-color: #a00; 
 
    border: 1px solid #111; 
 
    color: #fff; 
 
    display: block; 
 
    text-align: center; 
 
    transition-duration: 0.4s; 
 
} 
 
.hide-show-element label:after { 
 
    display: block; 
 
    content: "Show"; 
 
} 
 
.hide-show-element input:checked + label { 
 
    background-color: #fff; 
 
    border: 1px solid #a00; 
 
    color: #a00; 
 
} 
 
.hide-show-element input:checked + label:after { 
 
    content: "Hide"; 
 
} 
 

 
.test1 { 
 
    opacity: 0; 
 
    position: relative; 
 
    height: 0; 
 
    top: 20%; 
 
    transition-duration: 0.4s; 
 
    width: 0; 
 
} 
 

 
.hide-show-element input:checked ~ .test1 { 
 
    opacity: 1; 
 
    height: 200px; 
 
    width: 200px; 
 
}

<div class="hide-show-element"> 
 
    <input type="checkbox" id="toggle" /> 
 
    <label for="toggle"></label> 
 
    <img class="test1" src="http://lorempixel.com/200/200" /> 
 
</div>

来源

2015-05-17 19:16:37 connexo

jquery hide div与CSS过渡效果

回答

相关问题