slideDown effect（）不能從頁面的右側開始

-2

懸停的左上角按鈕向下滑動並顯示樣本描述。問題是，滑下來看起來好像是從第二個按鈕開始描述，並與第一個按鈕合併，而不僅僅是第一個按鈕。我該如何解決這個問題？slideDown effect（）不能從頁面的右側開始

的index.html

<!DOCTYPE html> 
<html> 
    <head> 
     <link href = "styles.css" type = "text/css" rel = "stylesheet" /> 
     <script src = "jquery-2.0.1.js" type = "text/javascript"></script> 
     <script src = "jquery-ui-1.10.3/jquery-ui-1.10.3/ui/jquery-ui.js" type = "text/javascript"></script> 
     <script src = "script.js" type = "text/javascript"></script> 
    </head> 


    <body> 
     <div id = "header"> 
      <h1>Header</h1> 
     </div> 


     <div id = "buttons"> 
      <div class = "column_div"> 

       <div id = "button_div1" class = "button_div"> 
        <img id = "text1" class = "button_pic" src = "http://s7.postimg.org/82pi8xcez/active_rus.png" /> 
       </div> 

       <div id = "button_div2" class = "button_div"> 
        <img id = "text2" class = "button_pic" src = "http://s7.postimg.org/82pi8xcez/active_rus.png" /> 
       </div> 

      </div> 


      <div class = "column_div"> 
       <div id = "button_div3" class = "button_div"> 
        <img id = "text3" class = "button_pic" src = "http://s7.postimg.org/82pi8xcez/active_rus.png" /> 
       </div> 

       <div id = "button_div4" class = "button_div"> 
        <img id = "text4" class = "button_pic" src = "http://s7.postimg.org/82pi8xcez/active_rus.png" /> 
       </div> 
      </div> 


      <div class = "column_div"> 
       <div id = "button_div5" class = "button_div"> 
        <img id = "text5" class = "button_pic" src = "http://s7.postimg.org/82pi8xcez/active_rus.png" /> 
       </div> 

       <div id = "button_div6" class = "button_div"> 

        <img id = "text6" class = "button_pic" src = "http://s7.postimg.org/82pi8xcez/active_rus.png" /> 
       </div> 
      </div> 

     </div> 
    </body> 
</html>

styles.css的

body 
{ 
    background-color: black; 
} 


#header 
{ 
    width: 100%; 
    text-align: center; 
} 


h1 
{ 
    color: white; 
} 


#buttons 
{ 
    float: left; 
    width: 100%; 
} 


.column_div 
{ 
    float: left; 
    width: 33%; 
} 


.button_div 
{ 
    width: 280px; 
    margin: 0 auto; 
} 


.button_pic 
{ 
    width: 280px; 
    height: 40px; 
    margin: 0; 
    border: 1px solid #DDD; 
} 


#descr 
{ 
    background-color: white; 
    width: 280px; 
    height: 150px; 
    margin: -5px auto 5px auto; 
    border: 1px solid #DDD; 
} 


h3 
{ 
    float: left; 
    height:100px; 
}

的script.js

$(document).ready (function() { 
    $(document).on ("mouseenter", "#text1", function() { 
     $("#descr").remove(); 
     $("#button_div1").append ("<div id = 'descr'></div>"); 
     $("#descr") 
      .hide() 
      .append ("<h3>Sample description</h3>") 
      .slideDown ("slow"); 
    }); 


    $(document).on ("mouseleave", "#text1", function() { 
     $("#descr").slideUp ("slow", function() { 
       $(this).remove(); 
     }); 
    }); 


    $(document).on ("mouseenter", "#descr", function() { 
     $("#descr").slideUp ("slow", function() { 
       $(this).remove(); 
     }); 
    }); 
});

演示：Fiddle

來源

2013-06-25 Kudayar Pirimbaev