show and hide div from right to left in jquery

user3089574 Published at Dev

user3089574

I am trying to show & hide a div with an image, when I mouse over an image/button the image div should show from right to left and when i mouse out from the button/image it should hide form left to right. here is my coding

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 is an image

HTML

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

when I'm doing show & hide its working, but its taking from left to right

if anybody knows help me,

Thanks

Bala

The above code should work if you added the 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"
         });
     });
 });

Collected from the Internet

Please contact [email protected] to delete if infringement.