CODEWITHSUNDEEP
jquerycsshideshow
user3089574
user3089574

Reputation: 53

show and hide div from right to left in jquery

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

Upvotes: 2

Views: 21992

Answers (5)

user3089574
user3089574

Reputation: 53

I made it working

jQuery code

$(".prod4").hover(
 //on mouseover
 function() {
  $('.txt4').show().animate({height: '291', width:'393', opacity:1}, 400);
 },
 //on mouseout
 function() {
  $('.txt4').hide().animate({height: '0px', width:'0px', opacity:0}, 'fast');
 }
);

CSS

.txt4{
 position:absolute;
 z-index:99999;
 top:115px;
 right:450px;
 width:0px;
 height:0px;
}

Upvotes: 0

Bala
Bala

Reputation: 3638

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

Upvotes: 2

Nishant
Nishant

Reputation: 916

It would be better if you can share HTML but anyways, any specific reason for using jquery for this as this can also be done via css try using:

`right : -100%;`

instead of left : 275px;

then change to right :0; on hover

this is just a common solution that i can recommend without seeing your code. It would be better and also more helpful to you if you can create a jsfiddle.

Upvotes: 0

NoobEditor
NoobEditor

Reputation: 15871

I trimmed some of you JS and apparanetly it seems to work
Here is a possible solution : wonder if this is what you want

am not very good in JS, but removing this part, works :

 $('.p123h').css({
             "position": "absolute",
             "z-index": "-1"
         });

Upvotes: 0

sachinkondana
sachinkondana

Reputation: 671

Make your .myContainer have width: 100% and try?

Use web inspector tools to inspect your DOM.

Upvotes: 0

Related Questions