Changing the css value using the if-else jquery structure

Question

I need to change the position of the item when I click on the link. I found one working code, but the problem is that it works through the style attribute

var _menu = $(".a-about-me"); var _block = $(".about-me"); _menu.click(function () { if (_block[0].style.top === '700px') { _block.animate({ 'top': '405px' }, 600); } else { _block.animate({ 'top': '700px' }, 600); } });

I need to change the values of the properties directly in the stylesheet. I am new and do not know how to fix ... should be like this

 var _menu = $(".a-about-me"); var _block = $(".about-me"); _menu.click(function () { if (_block[0].css('top') === '700px') { _block.animate({ 'top': '405px' }, 600); } else { _block.animate({ 'top': '700px' }, 600); } });

.css ('top') and .style.top are the same, the style in the css file itself cannot be changed, just to make changes to the house structure.
if you remove [0] in the second version, it will be almost equivalent to the first
@Grundy is meant in the .css file through rules, not tag attributes
@Grundy can you explain where [0] comes from and why in the first example?
It looks like an array, but where does it come from ... yes, the truth is, it works without it) thanks!

Answer 1 · 2016-04-19T16:10:07

The only thing I can offer is animation via css and in js you can change classes directly:

 .about-me { transition: all 1s ease-in-out; position: absolute; top: 405px; } .about-me.active { top: 700px; }

In js there will be the following:

 var $menu = $(".a-about-me"); var $block = $(".about-me"); $menu.click(function () { $block.toggleClass('active'); /* or if ($block.hasClass('active')) { $block.removeClass('active'); } else { $block.addClass('active'); } */ });

This is an analogue of the code given by you.

the code inside the handler can be replaced by $block.toggleClass('active')

Changing the css value using the if-else jquery structure

1 answer 1

More articles: