Question

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

效果不是渐进的
当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

当在自定义jQuery函数中使用'this'时，它的值是一个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);
};

在jQuery中出现和消失

3 个答案: