Javascript 为什么是；“法登”；及；淡出“；移动我的div？

我正在创建一个新网站，并使用JQuery在另一个网站（标题）中显示一个div。我在内联块中显示了4个div，结果如下：

我使用Jquery来显示包含“Accueil”的div，并使用函数fadeIn和fadeOut，但我的问题是：当移动到一个div上时，隐藏的div会像所需的那样设置动画并淡入，但另一个div（在右侧）正在向下移动！ 我的html如下所示：

The left box : 
    <div class="box-interactive box-interactive1">
      <div class="contenu-box">
          titi 1
      </div>
      <div id="bandeau1" class="bandeau">
          rr
      </div>
   </div>
The right box : 
   <div class="box-interactive box-interactive2">
      <div class="contenu-box">
          titi 2
      </div>
      <div id="bandeau2" class="bandeau" style="display : block;">
          accueil 2
      </div> 
    </div>

还有我的JS：

$(function(){ 
  $("div[class^='box-interactive']").hover(
      function(){
      var id = new Array;
      id = $(this).attr('class').split(' ');
      for (var i in id) {
        if(id[i].match('box-interactive.+')){
        var idnum = 'bandeau'+id[i].substring(15);
        $("#"+idnum+"").fadeIn(800);
        }
      }   
      },
      function(){
    var id = new Array;
      id = $(this).attr('class').split(' ');
      for (var i in id) {
        if(id[i].match('box-interactive.+')){
        var idnum = 'bandeau'+id[i].substring(15);
        $("#"+idnum+"").fadeOut(500);
        }
      }

      }
  );
});

第二个div（它以两种方式工作）随着特殊性向下移动：移动div的顶部等于第一个div的底部（隐藏之前的一个）。你有什么解释吗

---

小提琴：打开右大窗口查看问题；）thx

尝试在CSS中使用z-index将div堆叠在彼此的顶部

一旦动画完成，fadeIn和fadeOut会将元素设置为“display:none”，并将其从布局中删除。如果不希望动画影响布局，请设置不透明度的动画

$("#"+idnum+"").animate({opacity: 0}, 800);
...
$("#"+idnum+"").animate({opacity: 1}, 800);

---

您可以浮动

.bandeau

div，这样它们就不会影响内联布局流，从而有效地将其范围限制在父div上

.bandeau {
    width: 300px;
    height: 40px;
    background-image: url("../../img/Alex/accueil.png");
    background-size: auto 100%;
    position: relative;
    display: none;
    float: left; /* ADD THIS */
}

---

Fiddle:

一个选项是将不透明度设置为1或0，而不是使用fadeIn和fadeOut：

$("#"+idnum+"").animate( { opacity:1 }, 800 );

及

下面是一个示例来演示这种方法

关于代码的其他一些注释

首先，您的悬停入和悬停出功能几乎相同。任何时候你有那么多相似的代码，把它们组合成一个函数都是一个很好的主意

如果您有此代码：

var id = new Array;
id = $(this).attr('class').split(' ');

if(ids[i].match('box-interactive.+')){
    var idnum = 'bandeau'+id[i].substring(15);
    ...

没有必要使用

新数组

，因为您只是在替换下一行中的值。此外，我建议对数组使用复数名称，而不是单数名称：

var ids = $(this).attr('class').split(' ');

下一行是：

for (var i in id) {

切勿在数组上使用“for..in”循环。如果有人用新的方法或属性扩充

Array.prototype

，它会咬你一口。相反，使用数字for循环或迭代器，如jQuery的

$.each（）

下面是代码：

var id = new Array;
id = $(this).attr('class').split(' ');

if(ids[i].match('box-interactive.+')){
    var idnum = 'bandeau'+id[i].substring(15);
    ...

当您使用

.match

来测试这样的字符串时，您还可以使用它来提取所需的字符串部分，而无需借助脆性来维护

。子字符串（15）

调用：

var match = ids[i].match( /box-interactive(.+)/ );
if( match ) {
    var idnum = 'bandeau' + match[1];
    ...

说到这里，为什么不进一步简化事情，让jQuery为您完成所有的工作呢？不需要任何这种奇特的数组循环和类名检查。您可以使用以下内容替换整个JavaScript代码：

$(function(){ 
    $("div[class^='box-interactive']").hover(
        function(){
            $(this).find('.bandeau').animate( { opacity:1 }, 800 );
        },
        function(){
            $(this).find('.bandeau').animate( { opacity:0 }, 500 );
        }
    );
});

---

（您可能会注意到，我在这里反驳了我的第一条建议，并没有在hover-in和hover-out函数中组合重复代码。但是现在代码太少，不值得担心重复。）

请提供小提琴8我始终支持UPLASE为OP提供更完整的答案，如果可能，请提供示例代码。我在小提琴（）中尝试了它，但没有显示任何内容…谢谢它正在修复是的！但是为什么我的代码会影响布局？我的意思是为什么这个部门要下移？我想我已经明白为什么它要下移了。。。这是因为内联块！因为如果我移除它，将.box交互放在float left中，它就不会移动了！也许div的附加告诉另一个与她对齐（因为INLINE块）不？这是因为verical对齐。您也可以只添加

垂直对齐：top

到

.box interactive

，它将在没有浮动的情况下修复它。内联块元素有点易变。如果你不能让它运行，你可能想尝试浮动。