如何在鼠标悬停时从右向左滑动 td 并在鼠标悬停时滑回答案

【问题标题】：How to slide a td from right to left on mouseover and slide back on mouseout如何在鼠标悬停时从右向左滑动 td 并在鼠标悬停时滑回
【发布时间】：2013-11-24 03:27:25
【问题描述】：

我有一个 html 页面，它被分成单行和两列。第 1 列的宽度为 90%，第 2 列的宽度为 10%。

当页面加载时，我希望第二列应该完全隐藏，并且在整个页面上应该有第一列的内容。

但是当我将鼠标移向右侧页面的 10% 时。 td 的内容应该是滑动的，当我移出鼠标时，它应该向右滑动（隐藏）。

我正在尝试这样做：

$(document).ready(function() {
  document.getElementById("map-canvas").style.height = document.body.clientHeight + 'px';
  $( "#side" ).mouseover(function() {
    document.getElementById("map-canvas").className = "OverlayEffect";
    $( "#map-canvas" ).animate({
      width: "100%"
    });
  });
  $( "#side" ).mouseout(function() {
    $( "#map-canvas" ).animate({
      width: "90%"
    });
  });
});

HTML：

<table width="100%">
   <tr>
      <td width="90%" id="map">
         <!--  start  Loading Fancy Box handling -->
         <div id="modalMsg">
            <br /> <br /> <imgsrc="../DiagnosticDrop4/static/images/ajax-loader.gif" /> <br /> <br />
         </div>
         <!--  end  Loading Fancy Box handling -->
         <div id="map-canvas"></div>
      </td>
      <td width="10%" class="Sidebar" id="side">
         <div id="map-canvas1">
            <a id='link' href='../DiagnosticDrop4/san.html'>
               <h3>
               <center>Add/Delete SAN</center>
            </a>
         </div>
         <div id="map-canvas2">
            <a id='alink' href='../DiagnosticDrop4/ParamIntervalDetails'>
               <h3>
               <center>24hr Dashboard</center>
            </a>
         </div>
      </td>
   </tr>
</table>

【问题讨论】：

向您展示标记以及您尝试了什么？
阅读stackoverflow.com/questions/16208402
@Varun Jindal 我们应该为你编写代码吗？

标签： javascript jquery css html jquery-slider

【解决方案1】：

试试这段代码，我让它按照你想要的方式工作

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
        </script>

        <script>
                    $(document).ready(function() {
            $( "#side" ).hide();

            $("body").on("mousemove",function(event) {
                if (event.pageX >= $( document ).width() - 50) {
                    $( "#map" ).width('0%');
                    $( "#side" ).width('100%');
                    $( "#side" ).show();
                }
                else
                {
                    $( "#map" ).width('100%');
                    $( "#side" ).width('0%');
                    $( "#side" ).hide();    
                }
            });

        });

        </script>
    </head>

    <body>
        <table width="100%" border="1">
            <tr>
                <td width="90%" id="map">
                <!--  start  Loading Fancy Box handling -->
                    <div id="modalMsg">
                    <br /> <br /> <imgsrc="../DiagnosticDrop4/static/images/ajax-loader.gif" /> <br /> <br />
                    </div> <!--  end  Loading Fancy Box handling -->

                    <div id="map-canvas">

                    </div>
                </td>

                <td width="10%" class="Sidebar" id="side">
                    <div id="map-canvas1">
                        <a id='link' href='../DiagnosticDrop4/san.html'><h3>
                        <center>Add/Delete SAN</center></a>
                    </div>

                    <div id="map-canvas2">
                        <a id='alink' href='../DiagnosticDrop4/ParamIntervalDetails'><h3>
                        <center>24hr Dashboard</center></a>
                    </div>
                </td>
            </tr>
        </table>
    </body>
    </html>

【讨论】：

if (event.pageX >= $( document ).width() - 50) //这段代码的作用是鼠标已经到达屏幕的右边并且只是少 50px 触发它
逻辑完成你只需要导入一个平滑的css库并添加你的动画代码来为你做幻灯片效果;)
它对我不起作用，在鼠标悬停时右侧的 td 应该与以前的内容重叠，而在鼠标移出时它应该恢复原样。 jquery 是否提供滑动功能？
是的，它确实动画会为您解决问题，但上面的代码更像是一个基础，您可以将动画代码放入其中以提供更流畅的外观
当您尝试我的代码时，当您将光标移动到屏幕末尾时，它甚至显示 div 吗？如最右边？