How to reduce my code in both jQuery and CSS

Question

Here is my code:

jQuery:

$(document).ready(function () {
        $("#news").hover(function () {
            $('#news_img').animate({
                height: 'toggle'
            }, 290, function () {
            });
        });

        $("#news1").hover(function () {
            $('#news_img1').animate({
                height: 'toggle'
            }, 290, function () {
            });
        });

        $("#news3").hover(function () {
            $('#news_img3').animate({
                height: 'toggle'
            }, 290, function () {
            });
        });

        $("#news4").hover(function () {
            $('#news_img4').animate({
                height: 'toggle'
            }, 290, function () {
            });
        });
    });

JSFIDDLE here: http://jsfiddle.net/huydq91/N89Kw/

I would like to reduce my code and make it easier to manage in the future whenever I would love to add more <tr> or <td> tags without editing too much in the jQuery and CSS.

place your code in the question.

Bhojendra Rauniyar
– Bhojendra Rauniyar

2014-04-08 03:24:08 +00:00
Commented Apr 8, 2014 at 3:24 — Bhojendra Rauniyar
– Bhojendra Rauniyar, Commented Apr 8, 2014 at 3:24
Just jQuery code would be enough!

Bhojendra Rauniyar
– Bhojendra Rauniyar

2014-04-08 03:34:07 +00:00
Commented Apr 8, 2014 at 3:34 — Bhojendra Rauniyar
– Bhojendra Rauniyar, Commented Apr 8, 2014 at 3:34
OK. This has fixed already!

PMay 1903
– PMay 1903

2014-04-08 03:41:17 +00:00
Commented Apr 8, 2014 at 3:41 — PMay 1903
– PMay 1903, Commented Apr 8, 2014 at 3:41

Arun P Johny · Accepted Answer · 2014-04-08 04:13:20Z

4

You can target the hover elements by its class news and find the target element by appending the last digits in the hovered element's id to news_img like

$(document).ready(function () {
    $(".news").hover(function () {
        $('#news_img' + this.id.replace('news', '')).stop(true).animate({
            height: 'toggle'
        }, 290, function () {});
    });
});

Demo: Fiddle

You can remove the css part of the hover by adding some data-* attributes to the image like

<img src="http://i853.photobucket.com/albums/ab100/vimeo1903/Showroom1_zps923b43dc.jpg" border="0" alt="Showroom1" data-hover="http://i853.photobucket.com/albums/ab100/vimeo1903/Showroom1_1_zpse41d0851.jpg" />

then

$(document).ready(function () {
    //since the news elements has a common class, use it to target all the news elements instead of using individual ids
    $(".news").hover(function (e) {
        //you can find the `news_img` within the current news item using .find() instead of using its class to target it
        $(this).find('.news_img').stop(true).animate({
            height: 'toggle'
        }, 290);
        //find the image element within the current news
        var $img = $(this).find('.imgswap img');
        //if the current event is mouseenter then show the hover image else the src image
        //the hover handler registers 2 handler one for mouseenter another for mouseleave
        $img.attr('src', $img.data(e.type == 'mouseenter' ? 'hover' : 'src'));
    });
    //when we leaves the news elements we need to put back the original src, so store it using data api
    $('.news .imgswap img').each(function () {
        $(this).data('src', this.src);
    })
});

edited Apr 8, 2014 at 4:13

answered Apr 8, 2014 at 3:25

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

15 Comments

PMay 1903 Over a year ago

That works well. However, I am wondering about your code and Lloyd Banks's code, which one will help me to optimize the server?

Arun P Johny Over a year ago

@PMay1903 also see jsfiddle.net/arunpjohny/fz5eL/2 - it stream lines the hover image to be added to the image element itself instead of creating a new css style

PMay 1903 Over a year ago

@Arun P Johny: Your last updated code is petty nice and I don't need to add anything to CSS as my Title. Those are what I am looking for. I appreciate all your help and Lloyd Banks.

PMay 1903 Over a year ago

@Arun P Johny: Could you please add comments to your code in order to make it clear?

PMay 1903 Over a year ago

1. $img.attr('src', $img.data(e.type == 'mouseenter' ? 'hover' : 'src')); 2. $(this).data('src', this.src);--> These make me so confused...

|

Lloyd Banks · Accepted Answer · 2014-04-08 03:33:18Z

2

Combine your jQuery calls into one function family. Instead of 4 separate .hover() calls, use class names and do the following:

$(document).ready(function () {
    $(".news").hover(function(){
        $(this).find(".news_img").animate({
            height: "toggle"
        }, 290, function(){
        });
    });
});

On your CSS, you're pretty compact already and there's really not much more you can do to reduce the amount of code you have.

Updated fiddle

answered Apr 8, 2014 at 3:33

Lloyd Banks

36.9k58 gold badges172 silver badges264 bronze badges

1 Comment

PMay 1903 Over a year ago

Thank you for your code. Please let me know that your code with find will help my server running faster than the Arun P Johny's replace?

Sudharsan S · Accepted Answer · 2014-04-08 03:41:49Z

2

Use attribute selector in jquery.

 $(document).ready(function () {
        $("[id^=news]").hover(function () {
                $('#news_img').stop().animate({
                    height: 'toggle'
                }, 290, function () {
                });
    });
 });

Fiddle

edited Apr 8, 2014 at 3:41

answered Apr 8, 2014 at 3:23

Sudharsan S

15.4k4 gold badges34 silver badges51 bronze badges

6 Comments

Sudharsan S Over a year ago

which toggle Please look at the fiddle and check let me know

jfriend00 Over a year ago

This doesn't operate on a different news_img for each one like the OP's code.

PMay 1903 Over a year ago

All toggle for each image. Please take look on my JSFiddle and mouse over to each image, you will see the toggle goes up.

Sudharsan S Over a year ago

sorry i missed the braces

PMay 1903 Over a year ago

It's great. You are giving me one more choice for my code and it would be useful so much!

|

Collectives™ on Stack Overflow

How to reduce my code in both jQuery and CSS

3 Answers 3

15 Comments

1 Comment

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

15 Comments

1 Comment

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related