Question

我正在开始一个新的网站，我正在使用JQuery在另一个（标题）中显示div。我有4个div显示内联块，我的结果需要像这样： enter image description here

我正在使用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>

我的css：

/*CSS for boxes and interactive text*/
.box-interactive {
    width: 300px;
    height: 200px;
    background-color: red;
    margin: 20px;
    display: inline-block;
    size: fixed;
}

.contenu-box{
    width: 300px;
    height: 160px;
}

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

我的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的底部（隐藏的那个）。你有解释吗？

enter image description here

小提琴：http://jsfiddle.net/Msh2T/1/打开右侧窗口以查看问题;）thx

Answer 1

fadeIn和fadeOut会在动画完成后将元素设置为“display：none”，将其从布局中移除。如果您不希望动画影响布局，请为不透明度设置动画。

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

Answer 2

您可以浮动.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 */
}

小提琴：http://jsfiddle.net/Msh2T/3/

Answer 3

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

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

和

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

这是展示这种方法的working fiddle。

关于代码的一些其他说明......

首先，您的悬停和悬停功能几乎完全相同。只要你有那么多相似的代码，将它组合成一个函数就是一个非常好的主意。

你有这个代码的地方：

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

没有必要使用new Array，因为您只是替换下一行中的值。另外，我建议对数组使用复数名称而不是单数名称：

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

下一行是：

for (var i in id) {

永远不要在数组上使用'for..in'循环。如果有人用新方法或属性增加Array.prototype，它会咬你。相反，使用数字for循环或迭代器，如jQuery的$.each()。

接下来是这段代码：

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

当您使用.match来测试这样的字符串时，您也可以使用它来提取所需字符串的一部分，而无需通过脆弱的维护.substring(15)调用：< / p>

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 );
        }
    );
});

Updated fiddle

（你可能会注意到我在这里与我的第一条建议相矛盾，并没有将悬停和悬停功能中的重复代码组合在一起。但现在代码很少，以至于复制不是不值得担心。）

Answer 4

尝试在CSS中使用z-index将div叠加在彼此之上

为什么“fadeIn”和“fadeOut”功能会移动我的div？

4 个答案: