创建一个链接来关闭一个用jQuery淡入的元素？

Question

我在页面顶部创建了一个淡入淡出的通知：

HTML / PHP：

<?php if ( ! is_user_logged_in() ) : ?>
    <div class="notification">
        <span><?php _e( 'Welcome to Taiwantalk' ); ?></span>
    </div><!-- #container -->       
<?php endif; ?> 

CSS：

   .notification {
        background-color: #444;
        color: #FFF;
        height: 0;
        opacity: 0;
        padding: 8px 0 0;
    }

JS：

var $j = jQuery.noConflict();

$j(document).ready(function() {

  $j(".notification").animate({
    height: "22px",
    opacity: 1
  }, 1000 );

});

现在我想在右边创建一个关闭div的按钮，其动画与用于淡入div的动画相同。

有关如何实现这一目标的任何建议吗？

Answer 1

实际上和你已经拥有的一样。只需将高度设置为0px，将不透明度设置为0.假设您希望它向上滑动并淡出。如果你只想让它淡出然后将不透明度设置为0.你也可以使用jQuery fadeIn / fadeOut方法。

<input type="button" value="click" id="mybutton" />

//note that $j is relevant to the asker's code example. Typically jQuery just uses $. 
//See Roxon's answer for an example.
var $j = jQuery.noConflict();

$j(document).ready(function() {

  $j(".notification").animate({
    height: "22px",
    opacity: 1
  }, 1000 );

  $j("#mybutton").click( function() {
    $j(".notification").animate({
      height: "0px",
      opacity: 0
    }, 1000 );
  });

});

Answer 2

如果您想要相同的动画，只需使用.animate中的原始值。

$('#close').click(function() {
    $(".notification").animate({
        height: "0px",
        opacity: 0
    }, 1000);
});

演示：http://jsfiddle.net/Xzzra/

Answer 3

FIDDLE DEMO

var $j = jQuery.noConflict();

$j(document).ready(function($) {


    var notifiH = $j('.notification').height();
    $('.notification').animate({top:'0px', opacity:1},1000);
    $('.notification_close').click(function(){
        $('.notification').animate({ top:'-'+notifiH, opacity:0},1000);
    });


});

Answer 4

我会动画切换一个类，而不是设置高度和不透明度。您也可以在文档就绪事件上执行此操作。这使您可以将样式与功能分开。

这样的事情：

$( "#close_button" ).click(function() {
        $( ".notification").toggleClass( "notificationVisible", 1000 );
        return false;
    });

在你的CSS中，只需要这个：

.notificationVisible { height: 22px; opactiy: 1; }