jquery - 在jquery中从右到左显示和隐藏div

Question

我正在尝试显示和隐藏带有图像的 div，当我将鼠标悬停在图像/按钮上时，图像 div 应该从右到左显示，当我从按钮/图像移出鼠标时，它应该从左到右隐藏表格.这是我的代码

CSS

.txt4{
 position:absolute;
 z-index:99999;
 top:135px;
 left:275px;
}

查询

  < script type = "text/javascript"
 language = "javascript" > $(document).ready(function (e) {
     $(".prod4").mouseenter(function (e) {
         $('.txt4').show("slide", {
             direction: "right"
         }, 2000);
         $('.p123h').css({
             "position": "absolute",
             "z-index": "1"
         });
     });
     $(".prod4").mouseout(function (e) {
         $('.txt4').hide("slide", {
             direction: "left"
         }, 2000);
         $('.p123h').css({
             "position": "absolute",
             "z-index": "-1"
         });
     });
 }); < /script>

.prod4是一张图片

HTML

<div id="myContainer"> 
   <div class="prod4"><a href="#" class="prodTxt4"></a></div> 
   <div class="txt4"><img src="images/image65.jpg" /></div> 
</div> 

当我在做show & hide 它的工作时，但它是从左到右进行的

如果有人知道帮助我，

谢谢

Answer 1

如果你添加了 JQuery UI Library，上面的代码应该可以工作.

Here is your code, working with Jquery UI

$(document).ready(function (e) {
     $(".prod4").mouseenter(function (e) {
         $('.txt4').toggle("slide", {
             direction: "right"
         }, 2000);
         $('.p123h').css({
             "position": "absolute",
             "z-index": "1"
         });
     });
     $(".prod4").mouseout(function (e) {
         $('.txt4').toggle("slide", {
             direction: "left"
         }, 2000);
         $('.p123h').css({
             "position": "absolute",
             "z-index": "-1"
         });
     });
 });