Question

我在使用jQuery fadeIn（）函数时遇到了一些问题。基本上，我所拥有的是作为主显示屏的屏幕的一部分。我想淡出进出这个区域的div。目前，我所做的工作是淡出那里开始的div，但是当我试图淡化其他div时，没有任何反应。这是我到目前为止的代码。

$('#aboutbtn').click(function(e){    
    $('#slideshowContainer').fadeOut('fast', function(){
        $('#slideshowContainer').replace('<div id="about"></div>').fadeIn('slow');
        });

就像我说的那样，这会淡化幻灯片中的容器div，但是关于div不会出现在它的位置。

更新 -

嗯，这很尴尬，哈哈。我正在尝试引用我已经在我的HTML中使用的div，所以我想这实际上是replaceWith（''）没有任何意义。

如果我想用我已在HTML文档中定义的div替换，那么这不应该起作用吗？

$('#aboutbtn').click(function(e){    
$('#slideshowContainer').fadeOut('fast', function(){
    $('#slideshowContainer').replace('#about').fadeIn('slow');
    });

我要替换淡出div的div的id是关于的。但是，当我这样做时，它只显示#about。

Answer 1

尝试将文字放在ur div

中

here's my jsfiddle

$(document).ready(function () {
$('#aboutbtn').click(function (e) {
    $('#slideshowContainer').fadeOut('fast', function () {
        $('#slideshowContainer').replaceWith('<div id="about">You miss this thing!     </div>').fadeIn('slow');
    });
});
});

Answer 2

jQuery对象没有replace方法，请使用replaceWith：

$('#slideshowContainer').fadeOut('fast', function() {
    $(this).replaceWith(function() {
        return $('<div id="about">about</div>').hide().fadeIn();
    });
});

http://jsfiddle.net/ypgwL/

更新

$('#slideshowContainer').fadeOut('fast', function () {
    var $d = $('#about');
    $(this).replaceWith($d);
    $d.fadeIn();
});

http://jsfiddle.net/ujWQW/

Answer 3

以下是我认为你想要做的一个完整的例子：

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function(){
   $('#aboutbtn').click(function(e){    
       $('#slideshowContainer').fadeOut('fast', function(){
          ele = $('<div id="about" style="display:none"></div>').fadeIn('slow');
          $('#slideshowContainer').replaceWith(ele)
       });
   });
});
</script>

<div id="slideshowContainer"></div>

<input type="button" name="button" value="Button" id="aboutbtn">

Answer 4

试试这个

 $('#aboutbtn').click(function(e){    
 $('#slideshowContainer').fadeOut('fast', function(){
$(this).replaceWith('#about').fadeIn('slow');
});

或者您可以使用AppendTo而不是rplacewith

$('#aboutbtn').click(function(e){    
 $('#slideshowContainer').fadeOut('fast', function(){
$(this).appendTo('#about').fadeIn('slow');
});

jQuery fadeIn（）无法使用fadeOut（）

4 个答案: