Question

我有以下 HTML

    <table>
      <tr>
        <td id="portrait">
            <div id="photo"></div>
        </td>
      </tr>
    </table>

CSS

#portrait{
    width:120px;
    height:100px;
  top:20px;
    border: solid black 1px;
    position:relative;
  float: left;
}
#photo{
  width:inherit;
  height:inherit;
  position:inherit;
  float:inherit;
}
#ppo{
  opacity:0;
  background-color:green;
  float:left;
  position:relative;
  width:0px;
  left:30px;
}

的Javascript

console.clear();

    function photoOptions(){

        div = document.createElement("div");
        div.setAttribute("id", "ppo");
        div.style.height = $("#portrait").css("height");
      div.style.top = $("#portrait").css("top");

      $(div).appendTo('#portrait').animate({ opacity: 1, width: "350px" }, 'slow');
    }

    $( document ).ready( function(){

      var timer = null;

    $("#photo").mouseenter(function(){
        $("#photo").css({"cursor":"pointer"});
      timer = setTimeout(function(){
          $("#photo").css({"cursor":"wait"});
        timer = setTimeout(function(){
           photoOptions();
        },600);
      },500);
    });

    $("#portrait").mouseleave(function(){
       clearTimeout(timer);
        $("#ppo").fadeOut("slow",function() {
          $("#ppo").remove()
        });
    });

    });

我想要的是绿色div，它看起来是黑色边框右侧的“完美贴合”（相同高度）。（看起来你必须将鼠标悬停在盒子上）。对此有何帮助？谢谢！

Answer 1

小提琴是你的朋友。原版的 http://jsfiddle.net/NEBRZ/

你可以纯粹用CSS做到这一点 http://jsfiddle.net/ffsLC/

#portrait{
    width:120px;
    height:100px;
    top:20px;
    border: solid black 1px;
    position:relative;
    float: left;
    margin: 0px;
    padding: 0px;
}
#photo{
    width:inherit;
    height:inherit;
    position:inherit;
    float:inherit;
    opacity:0;
    background-color:green;
    float:left;
    position:relative;
    width:0px;
   -moz-transition: width 2s, opacity 2s, -moz-transform 2s;
   -webkit-transition: width 2s, opacity 2s, -webkit-transform 2s;
   -o-transition: width 2s, opacity 2s, -o-transform 2s;
    transition: width 2s, opacity 2s, transform 2s;
}
#portrait:hover #photo{
    opacity:1;
    width:100%;
}

编辑：

我更了解你想要的东西。我把它作为CSS过渡只是因为它更优雅http://jsfiddle.net/59Yfq/

您的原始代码插入了一个元素。经验法则：只需display:none;或width:0;就足够了，无需在JS中创建和管理元素。如果您使用的是表格，请使用该表格

动画div到另一个div的右侧

1 个答案:

编辑：