Home › Forums › JavaScript › How do i make this Jquery code shorter and more efficient?
- This topic is empty.
-
AuthorPosts
-
May 25, 2013 at 8:36 pm #45018AnonymousInactive
$("#staff_member_one").mouseenter(function() { $("#staff_member_info_one").stop().animate({top:'-160px'},200); }); $("#staff_member_one").mouseleave(function() { $("#staff_member_info_one").stop().animate({top:'0px'},200); }); $("#staff_member_two").mouseenter(function() { $("#staff_member_info_two").stop().animate({top:'-160px'},200); }); $("#staff_member_two").mouseleave(function() { $("#staff_member_info_two").stop().animate({top:'0px'},200); }); $("#staff_member_three").mouseenter(function() { $("#staff_member_info_three").stop().animate({top:'-160px'},200); }); $("#staff_member_three").mouseleave(function() { $("#staff_member_info_three").stop().animate({top:'0px'},200); }); $("#staff_member_four").mouseenter(function() { $("#staff_member_info_four").stop().animate({top:'-160px'},200); }); $("#staff_member_four").mouseleave(function() { $("#staff_member_info_four").stop().animate({top:'0px'},200); }); $("#staff_member_five").mouseenter(function() { $("#staff_member_info_five").stop().animate({top:'-160px'},200); }); $("#staff_member_five").mouseleave(function() { $("#staff_member_info_five").stop().animate({top:'0px'},200); }); $("#staff_member_six").mouseenter(function() { $("#staff_member_info_six").stop().animate({top:'-160px'},200); }); $("#staff_member_six").mouseleave(function() { $("#staff_member_info_six").stop().animate({top:'0px'},200); }); $("#staff_member_seven").mouseenter(function() { $("#staff_member_info_seven").stop().animate({top:'-160px'},200); }); $("#staff_member_seven").mouseleave(function() { $("#staff_member_info_seven").stop().animate({top:'0px'},200); }); $("#staff_member_eight").mouseenter(function() { $("#staff_member_info_eight").stop().animate({top:'-160px'},200); }); $("#staff_member_eight").mouseleave(function() { $("#staff_member_info_eight").stop().animate({top:'0px'},200); }); $("#staff_member_nine").mouseenter(function() { $("#staff_member_info_nine").stop().animate({top:'-160px'},200); }); $("#staff_member_nine").mouseleave(function() { $("#staff_member_info_nine").stop().animate({top:'0px'},200); }); $("#staff_member_ten").mouseenter(function() { $("#staff_member_info_ten").stop().animate({top:'-160px'},200); }); $("#staff_member_ten").mouseleave(function() { $("#staff_member_info_ten").stop().animate({top:'0px'},200); }); $("#staff_member_eleven").mouseenter(function() { $("#staff_member_info_eleven").stop().animate({top:'-160px'},200); }); $("#staff_member_eleven").mouseleave(function() { $("#staff_member_info_eleven").stop().animate({top:'0px'},200); }); $("#staff_member_twelve").mouseenter(function() { $("#staff_member_info_twelve").stop().animate({top:'-160px'},200); }); $("#staff_member_twelve").mouseleave(function() { $("#staff_member_info_twelve").stop().animate({top:'0px'},200); });
May 25, 2013 at 8:44 pm #136503pixelgridParticipantchange your html from id to classes like
div class=’staff staff_one’ /divthen with your jQuery try
var number; $('.staff').hover(function(){ number = $(this).attr('class').replace(/staff /,'').split('_')[1]; $("#staff_member_info_"+number).stop().animate({top:'-160px'},200); },function(){ $("#staff_member_info_"+number).stop().animate({top:'0px'},200); });
May 25, 2013 at 8:55 pm #136504AnonymousInactive@pixelgrid I would actually preffer leaving it that way than change classes because other elements are dependent of those id’s and it would get confusing having to replace them all. I want to achieve the same functionality here on the “about us” section with the staff divs and hover states. http://reallycoolstuff.net/PROJECTS/Unica/
May 25, 2013 at 9:02 pm #136505pixelgridParticipantcss would be ok for what you want no javascript needed
just on an image hover detect the hover on the parent and transition the inner div with the textsin the one you want to do alike you can go with
.staff_member_wrapper:hover .staff_member_info{
top:0;
}May 25, 2013 at 9:15 pm #136506AnonymousInactive@pixegrid i know i could have dont it with css. But css transitions don’t work on IE.
May 25, 2013 at 9:24 pm #136507unasAquilaParticipantAre all the element inside a container and if so could you not use a child selector?
May 25, 2013 at 9:54 pm #136509unasAquilaParticipantOr you could maybe do something like
$(“#staff_member_one, #staff_member_two, #staff_member_three, #staff_member_four”).hover(function() {
$(this).stop().animate({top:’-160px’},200);
}, function(){
$(“#staff_member_one, #staff_member_two, #staff_member_three, #staff_member_four”).stop().animate({top:’0px’},200);
});May 26, 2013 at 12:07 am #136513JohnMotylJrParticipant@Jarolin
You can bind an element with one or more events like:
var sm1 = $('#staff_member_one');
sm1.bind({
mouseenter: function() {
$("#staff_member_info_one").stop().animate({top:'-160px'},200);
},
mouseleave: function() {
$("#staff_member_info_one").stop().animate({top:'0px'},200);
}
});or
$.hover()
var sm1 = $('#staff_member_one');
sm1.hover(
function() {
$("#staff_member_info_one").stop().animate({top:'-160px'},200);
},
function() {
$("#staff_member_info_one").stop().animate({top:'0px'},200);
}
);ORRR!!! I see how most of your ID’s end with a _one, _two, three etc… how about query through for the element id? Even maybe create an array and test against that. Check out this pen that shows you what i mean. It could save you a lot of lines of code. But im super tired right now so i probably coded some poo for you, lemme know :)
May 26, 2013 at 9:35 am #136529CrocoDillonParticipantI would do it like @jamy_za code, maybe wrap it in a `.each( … )` to avoid repetition, but that part is so small it might only be harder to read. I would get the id like this: `this.id`, don’t need the jQuery wrapper for that ;)
May 26, 2013 at 10:51 am #136531AnonymousInactive@jamy_za is there anything i should change in your code for it to work? it’s not working for me right now.
May 26, 2013 at 11:45 am #136534AlenParticipantOn the first line `id^=”staff_,member_”` there is a comma after `staff_`.
May 26, 2013 at 12:34 pm #136543AnonymousInactive@AlenAbdula still not working after removing it.
May 26, 2013 at 1:15 pm #136547unasAquilaParticipant@jamy_za way is definitely the best and here is a working [pen](http://codepen.io/unasAquila/pen/nIwCh)
May 26, 2013 at 1:35 pm #136552MerriParticipantWhy this is being done in jQuery in the first place? It is simple to do this in CSS transitions. Older browsers shouldn’t matter that much for this kind of effect.
If nothing else it would be more efficient.
May 26, 2013 at 1:53 pm #136554AnonymousInactive@Merri i would prefer leaving it this way than to use CSS. it’s not that big of a problem to make it shorter anyway.
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.