如何在mouseover上从右向左滑动td，在mouseout上向后滑动

How to slide a td from right to left on mouseover and slide back on mouseout

本文关键字：td mouseout mouseover      更新时间：2023-10-03

我有一个html页面，它被分为单行和两列。第一列的宽度为90%，第二列为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>

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

<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>
相关文章：