We Keep Coding

Put transition to hover in jquery

I have this script in jquery which makes a hover image (in the hover replaces the images) .
The specific question is how do I place a transition ?
$( "figure.salud img" ).hover(
function() {
$( this ).attr("src","img/salud5.jpg");
},function() {
$( this ).attr("src","img/salud5-gris.jpg");
}
);

Are you looking for something as this ,do let me know if something else was expected!
$( ".salud img" ).hover(
function() {
$( this ).fadeOut(0).attr("src","https://pmcdeadline2.files.wordpress.com/2014/06/yahoo-logo.jpg").fadeIn(500);
},function() {
$( this ).fadeOut(0).attr("src","http://velocityagency.com/wp-content/uploads/2013/08/go.jpg").fadeIn(500);
}
);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="salud">
<img src="http://velocityagency.com/wp-content/uploads/2013/08/go.jpg" width="160" height="160"/>
</div>
JS FIDDLE: https://jsfiddle.net/nhwuh7pb/9/

addEventListener (show/hide)

I want do a toggle with a button to show and hide a tag(div). So, buttom(toggle) --> to div(show/hide).
window.onload = function(){
var button = document.getElementById('button');
function show(event){
event.target.classList.toggle('hide');
}
button.addEventListener('click', show, false);
}
Because in jQuery is so:
$(document).ready(function(){
$( "#button" ).click(function(){
$( "div" ).toggle( "slow" );
});
});
But in JavaScript?

I do not completely understand your question but I suspect your trouble is with targeting the div which should be hidden or shown.
To do this with jQuery:
HTML
<button class="toggle">Toggle</button>
<div class="text">Hello</div>
Javascript
$(document).ready(function(){
$("button.toggle").click(function(){
$("text").toggle();
});
}

Toggle 2 div with one onclick

I have 2 divs which i need to toggle them with one button, the first one slide Up and the second one slide down.
HTML
dasdasdasdasd
<button>Toggle 'em</button>
JQuery
$( "button" ).click(function() {
$( "#nav" ).slideUp();
});
Can anybody help me out?
JSFIDDLE

You can use class instead of id and make one div hidden by using display:none;
html:
<div class="nav" style="background:black; width:100%; height:95px">dasdasdasdasd</div>
<div class="nav" style="background:gray; height:200px;display:none;"></div>
<button>Toggle 'em</button>
jquery
$( "button" ).click(function() {
$( ".nav" ).toggle( "slow" );
});
Demo

Use a class or then name attribute instead of an id .
HTML
<div class="nav" style="background:black; width:100%; height:95px">dasdasdasdasd</div>
<div class="nav" style="background:gray; height:200px"></div>
<button>Toggle 'em</button>
JS
$( "button" ).click(function() {
$( ".nav" ).toggle( "slow" );
});
JSFiddle
PS
Never use the same id for two elements. An id should be unigue.

You need to hide one element to toggle them differently
$( "button" ).click(function() {
$( "#nav1" ).slideToggle( "slow" );
$( "#nav2" ).slideToggle( "slow" );
});
Demo

Try this,
Html
<div id="nav1" style="background:black; width:100%; height:95px">dasdasdasdasd</div>
<div id="nav2" style="background:gray; height:200px"></div>
And some CSS
#nav1{
display:none;
}
Script
$( "button" ).click(function() {
$( "#nav1,#nav2" ).slideToggle( "slow" );
});
Demo

Duplicate ids are invalid html, you should rather use class instead.
You will also need to hide one element in beginning for toggling.:
$( "button" ).click(function() {
$( ".nav" ).slideToggle( "slow" );
});
Working Demo

It seems that your div has an id of nav. In order to select 2 divs, you can try assigning the same class name to both, for example:
<div class="nav"></div> (x2)
Then change your jQuery to:
$('.nav').slideUp();
That way, jQuery knows to select both divs and slide them up.

JQuery - Adding class onto element, and then interacting with that class doesn't work

When you click ( ".toggle-button a" ), it adds .close class to itself. And fades in .info-overlay
This works fine, but when you click it again, I want info-overlay to fade out again, and the close class to be removed. But this doesn't work.
Am I missing something here?
http://jsfiddle.net/bazzle/xpS9P/1/
html
<div class="toggle-button">
<a>click</a>
</div>
<div class="info-overlay">
content
</div>
css
.info-overlay{
display:block;
width:100px;
height:100px;
background-color:green;
display:none;
};
js
$( ".toggle-button a" ).click(function() {
$( ".info-overlay" ).fadeIn("500");
$(this).addClass('close');
});
$( ".toggle-button a.close" ).click(function(){
$( ".info-overlay").fadeOut("500");
$(this).removeClass('close');
});

Use event delegation:
Change
$( ".toggle-button a.close" ).click(function(){
$( ".info-overlay").fadeOut("500");
$(this).removeClass('close');
});
to:
$(document).on('click',".toggle-button a.close",function(){
$( ".info-overlay").fadeOut("500");
$(this).removeClass('close');
});
Because a .click() is attach and forget handler, but .on() is dynamic.

see updated Fiddle
$( ".toggle-button a" ).click(function() {
if($(this).hasClass('close')){
$( ".info-overlay").fadeOut("500");
$(this).removeClass('close');
}else{
$( ".info-overlay" ).fadeIn("500");
$(this).addClass('close');
}
});
reference hasClass()

You could use delegation or just set your logic as following:
DEMO
$(".toggle-button a").click(function () {
$(".info-overlay").fadeToggle(500).toggleClass('close');
});

Simply function to separte buttons

I have very basic problem, actually it's look Here. I want to separate two buttons.
jQuery
$( "span" ).click(function() {
$( "p" ).toggle( "slow" );
});
HTML
<span>↓ Hobby </span>
<p class="contentDiv" >Such interesting text, eh?</p>
<br> <br>
<span>↓ Sport </span>
<p class="contentDiv" >Such interesting text, eh?</p>
I was trying by getElementById but it doesn't work.
I'm beginner, be patient.

When you are using $('p') you are selecting all p elements, you need to specify like this
$( "span" ).click(function() {
$(this).next().toggle();
});

Try this.
$( "span" ).click(function() {
$(this).closest('p').toggle();
});