FadeIn FadeOut和div爲什麼會移動？

可能是我失蹤的東西，但我對此有點頭疼。FadeIn FadeOut和div爲什麼會移動？

我想要顯示/隱藏鏈接右側的「子菜單div」對齊。

當我加載div正確的位置，但當我點擊隱藏/顯示鏈接，突然div改變的地方底部。

順便說一句，有沒有其他更好的方法來做到這一點，或者這是好的？此外，如果我不在網頁加載中顯示div，我正在考慮使用.hide（）或隱藏的樣式，是嗎？

預先感謝

CSS

div.inline2 { 
    display: inline-block; 
    width: 150px; 
} 
div.inline { 
    position:absolute; 
    display: inline-block; 
    border:1px solid #CCC; 
    background:#FFF; 
}

$(document).ready(function() { 

    $('a#show').click(function() { 
    $('div#submenu').fadeIn(); 
    }); 

    $('a#hide').click(function() { 
    $('div#submenu').fadeOut(); 
    }); 
});

HTML

<div class="inline2"> 
    <a href="#" id="show">Show_links</a> 
    <a href="#" id="hide">Hide links</a> 
    </div> 

    <div class="inline" id="submenu"> 
    <a href="#">Link 1</a><br /> 
    <a href="#">Link 2</a> 
    </div>

來源

2013-11-23 TrOnNe

fadeIn()增加DIV風格display: block;所以DIV顯示到下一行

前格被稱呼inline-block

div.inline2 { 
    display: inline-block; 
    width: 150px; 
}

fiddle Demo

使用的類來添加的fadeIn和fadeOut效果，而你的DIV移動到下一行

$(document).ready(function() { 
    $('a#show').click(function() { 
     $('div#submenu').removeClass('hidden').addClass('visible'); 
    }); 

    $('a#hide').click(function() { 
     $('div#submenu').addClass('hidden').removeClass('visible'); 
    }); 
});

CSS

.visible { 
    opacity: 1; 
    transition: opacity 2s linear; 
} 
.hidden { 
    visibility: hidden; 
    opacity: 0; 
    transition: visibility 0s 2s, opacity 2s linear; 
}

來源

2013-11-23 16:48:25

非常感謝，最後我用您的解決方案。並打開隱藏子菜單鏈接的頁面？因爲如果我在加載過程中切換到隱藏狀態，您將能夠看到子菜單正在隱藏，看起來不太好.. – TrOnNe

@TrOnNe歡迎高興幫助:) –

嘗試：

$(document).ready(function() {   
    $('a#show').click(function() { 
    $('div#submenu').removeClass("none"); 
    });  
    $('a#hide').click(function() { 
    $('div#submenu').addClass("none"); 
    }); 
});

Fiddle here.

來源

2013-11-23 16:55:47 Hiral

你只需要改變jQuery代碼:)：

<script type="text/javascript"> 
    $(document).ready(function() { 

$('a#show').click(function() { 
$("div#submenu").animate({ 
    opacity: 1 
    }, 500, function() { 
    // Animation complete. 
    }); 
}); 

$('a#hide').click(function() { 
$("div#submenu").animate({ 
    opacity: 0 
    }, 500, function() { 
    // Animation complete. 
    }); 
}); 
});</script>

來源

2013-11-23 17:32:03

FadeIn FadeOut和div爲什麼會移動？

回答

相關問題