WebArtz - The Web Design Forum
Welcome to WebArtz, Guest!

WebArtz is a nice place for discussions related to web designing and coding. We help our members to code their own website templates with HTML and CSS. We give them advice on various issues.

To know more about WebArtz Forum, visit the About Us page.

At the moment, you are viewing the forum as a guest. As a guest you can't make post and participate in discussions. You need to register and become a member of the forum. Click the register link below and become a part of this forum.

Thank You


You are not connected. Please login or register

View previous topic View next topic Go down  Message [Page 1 of 1]

1 Jquery animate the posting butons ! on Wed Jun 15, 2011 1:48 pm

razvy3


Registered Member
Registered Member
I tried to animate up/down the posting buttons but no effect this is the code

css
Code:
 .posting img {
    background: url("http://i36.servimg.com/u/f36/11/96/49/61/onhove10.png") repeat scroll 0 0 transparent;
}

jquery
Code:
  $(function(){
$('.posting img')
.css( {backgroundPosition: "0 0"} )
.mouseover(function(){
$(this).stop().animate({backgroundPosition:"(0 44px)"}, {duration:200})
})
.mouseout(function(){
$(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:200})
})
}); 

2 Re: Jquery animate the posting butons ! on Wed Jun 15, 2011 9:03 pm

Drogba921


Registered Member
Registered Member
What exactly are you trying to do?

http://www.codinghelp.org

3 Re: Jquery animate the posting butons ! on Wed Jun 15, 2011 11:44 pm

razvy3


Registered Member
Registered Member
i want to do this effect http://snook.ca/technical/jquery-bg/ example A !

4 Re: Jquery animate the posting butons ! on Thu Jun 16, 2011 12:50 am

RockerMan


WebArtz Technician
WebArtz Technician
Code:
$(function(){
   $('.posting img')
      .css( {backgroundPosition: "0 0"} )
      .mouseover(function(){
         $(this).stop().animate({backgroundPosition:"(0 44px)"}, {duration:500})
      })
      .mouseout(function(){
         $(this).stop().animate({backgroundPosition:"(0 0)"}, {duration:200, complete:function(){
            $(this).css({backgroundPosition: "0 44px"})
         }})
      })


Try this Smile


_________________


No support via. PM, as they will just be deleted
http://www.graphics-post.com/

5 Re: Jquery animate the posting butons ! on Thu Jun 16, 2011 1:16 am

razvy3


Registered Member
Registered Member
i tried this is my css code
Code:
 .posting img {
    background: url("http://i36.servimg.com/u/f36/11/96/49/61/onhove10.png") repeat scroll 0 0 transparent;
}
.posting img:hover {
    background-position: 0px 44px;

 

and the jquery from you but is not that effect

6 Re: Jquery animate the posting butons ! on Thu Jun 16, 2011 2:33 am

RockerMan


WebArtz Technician
WebArtz Technician
You are hosting it correctly, yes?

Also, are you enclosing it in document.ready?


_________________


No support via. PM, as they will just be deleted
http://www.graphics-post.com/

7 Re: Jquery animate the posting butons ! on Thu Jun 16, 2011 4:02 am

Gangstar15


Registered Member
Registered Member
Did you also hosted the background position plugin:
http://snook.ca/technical/jquery-bg/jquery.bgpos.js

8 Re: Jquery animate the posting butons ! on Thu Jun 16, 2011 5:57 am

RockerMan


WebArtz Technician
WebArtz Technician
Thats just for IE I think mate Smile

I tried it without and worked fine Wink


_________________


No support via. PM, as they will just be deleted
http://www.graphics-post.com/

9 Re: Jquery animate the posting butons ! on Thu Jun 16, 2011 1:27 pm

razvy3


Registered Member
Registered Member
Solved!



Last edited by razvy3 on Thu Jun 16, 2011 3:28 pm; edited 1 time in total (Reason for editing : solved)

10 Re: Jquery animate the posting butons ! on Thu Jun 16, 2011 5:48 pm

RockerMan


WebArtz Technician
WebArtz Technician
Topic marked as Solved & Locked

~ RM


_________________


No support via. PM, as they will just be deleted
http://www.graphics-post.com/

View previous topic View next topic Back to top  Message [Page 1 of 1]

Permissions in this forum:
You cannot reply to topics in this forum