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

Question

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

CSS

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

Jquery

  < 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"
         });
     });
 });