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

ur 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

replacejQuery オブジェクトにはメソッドがありません。次を使用して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 に答える
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');
});

または、rplacewith の代わりに AppendTo を使用できます

$('#aboutbtn').click(function(e){    
 $('#slideshowContainer').fadeOut('fast', function(){
$(this).appendTo('#about').fadeIn('slow');
});
于 2013-05-10T03:09:40.670 に答える