jquery - 在 jQuery 中出现和消失

Question

我想为 jQuery 创建两个新方法，使对象出现和消失。我不想使用 jQuery 方法show()和hide()（既不是fadeIn()或fadeOut()），因为：

• 效果不是渐进的
• 当 a 时div hides，该对象不再出现在页面中并且所有其他div移动。

我的代码不起作用：对象消失但不出现。

有什么线索吗？

jQuery.fn.disappear = function() {
    this.fadeTo('slow', 0, function() {
    this.css('visibility', 'hidden');
});
};

和

jQuery.fn.appear = function() {
     this.css('visibility', 'visible');
     this.fadeTo('slow', 1);
};

Answer 1

尝试：

jQuery.fn.disappear = function() {
    $(this).fadeTo('slow', 0, function() {
    });
};
jQuery.fn.appear = function() {
    $(this).fadeTo('slow', 1, function(){
        console.log(this);
    });
};

您的this. http://jsfiddle.net/jywkW/4/

可见性规则是不必要的，但如果您愿意，可以保留它。

Answer 2

为什么这么难？只使用fadeOut 和fadeIn 来消失：

jQuery.fn.disappear = function(duration,callback) {
 this.animate({opacity:0},duration,callback);
};

并出现：

jQuery.fn.appear = function(duration,callback) {
 this.animate({opacity:1},duration,callback);
};

并访问它，你可以这样做：

$(function(){
  $.appear(1000,function(){
    // Write a callback
    // Like $(this).css('visibility','visible');
  });
  $.disappear(1000,function(){
    // Write a callback
    // Like $(this).css('visibility','hidden');
  });
});

Answer 3

当 'this' 用于自定义 jQuery 函数时，它的值是一个 jQuery 对象。当在回调函数中使用“this”时，它是一个 DOM 对象。

正确的代码是：

jQuery.fn.disappear = function() {
    this.fadeTo('slow', 0, function() {
    jQuery(this).css('visibility', 'hidden');
});
};

和

jQuery.fn.appear = function() {
     this.css('visibility', 'visible');
     this.fadeTo('slow', 1);
};