0

我在使用 jQuery fadeIn() 函数时遇到了一点问题。基本上，我所拥有的是作为主显示器的屏幕的一部分。我想淡入淡出这个区域的div。目前，我的工作是淡出从那里开始的 div，但是当我尝试淡入另一个 div 时，什么也没有发生。这是我到目前为止的代码。

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

就像我说的，这会淡出 slideshowContainer div，但 about div 并没有出现在它的位置。

更新 -

好吧，这很尴尬，哈哈。我试图引用我的 HTML 中已有的 div，所以我想 replaceWith('') 真的没有意义。

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

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

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

4

4 回答 4

2

尝试将文本放入您的 div

这是我的jsfiddle

$(document).ready(function () {
$('#aboutbtn').click(function (e) {
    $('#slideshowContainer').fadeOut('fast', function () {
        $('#slideshowContainer').replaceWith('<div id="about">You miss this thing!     </div>').fadeIn('slow');
    });
});
});
于 2013-05-10T03:02:17.020 回答
0

这是我认为您正在尝试做的完整示例：

<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">
于 2013-05-10T03:03:43.210 回答
0

尝试这个

 $('#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');
});
于 2013-05-10T03:09:40.670 回答
0

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/

于 2013-05-10T02:59:37.173 回答