jquery CSS properties selecting

Question

I want to create something when clicking on the image inside the div element. It should change it's color to blue, alongside changing the background color to blue. Is the code I am writing correct? Because it's not working properly. Also, is there a better way to apply CSS to elements?

FIDDLE

var photo = $('#photo');
var html = $('html');
var bg = $('#bg');
$(photo).on('click', function(){
  $(this).hide()
  .delay(600)
  .fadeIn(300);
  $(html, bg).css({
    background :'blue'
  });
});

html

<div id='bg'>
    <img id='photo' src="http://img.pixland.uz/u11878f337693s.jpg" alt="" />
</div>

possible duplicate of How to run two jQuery animations simultaneously? — Vucko
– Vucko, Commented May 25, 2014 at 12:06

Community · Accepted Answer · 2017-05-23 11:57:13Z

3

As well as Rohan Kumar's answer, which is of course wholly correct, there is a method for combining jQuery selections: $.fn.add. You can pass an HTML element, an array of elements, a jQuery selection, a jQuery selector or an HTML string to it. In this case, we could pass one of the jQuery objects you created:

In this case you could do the selection with html.add(bg):

var photo = $('#photo');
var html = $('html');
var bg = $('#bg');
photo.on('click', function(){
  $(this).hide()
  .delay(600)
  .fadeIn(300);
  html.add(bg).css({
    background :'blue'
  });
});

jsFiddle

edited May 23, 2017 at 11:57

CommunityBot

11 silver badge

answered May 25, 2014 at 15:01

lonesomeday

239k54 gold badges330 silver badges329 bronze badges

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

Comments

Rohan Kumar · Accepted Answer · 2014-05-25 12:12:11Z

2

You are using photo as jquery object so no need to use a $ for photo again, or try it like,

var photo = '#photo';
var html = 'html';
var bg = '#bg';
$(photo).on('click', function(){
    $(this).hide()
    .delay(600)
    .fadeIn(300);
    $(html+','+ bg).css({
    // to make multiple selectors into a single one
        background :'blue'
    });
});

Refer multiple-selectors for more details

Live Demo

answered May 25, 2014 at 12:12

Rohan Kumar

40.7k11 gold badges81 silver badges111 bronze badges

2 Comments

Tukhsanov Over a year ago

thank you @Rohan Kumar this is what i needed people did not understand me. thank you

Popnoodles Over a year ago

$(html+','+ bg)? I would prefer html.add(bg) or bg.add(html)

Collectives™ on Stack Overflow

jquery CSS properties selecting

2 Answers 2

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related