We Keep Coding

Add a class on hover remove class on second hover

I want to add a class on hover but not remove it when mouse leaves. Instead it must be removed on the second mouse hover. So on mouse hover add class. Mouse leaves class remains. Mouse hovers again class is removed.
This code adds the class but if the mouse leaves the class is removed which is not what I'm trying to achieve.
jQuery('.menuButton').hover(function(){
jQuery('.mainMenuDrop').addClass('show')
}, function() {
jQuery('.mainMenuDrop').removeClass('show')
});

To achieve your requirement of add on first entry and remove on second entry, you can change your existing code:
jQuery('.menuButton').hover(function(){
jQuery('.mainMenuDrop').addClass('show')
}, function() {
jQuery('.mainMenuDrop').removeClass('show')
});
to use .toggleClass
jQuery('.menuButton').hover(function(){
jQuery('.mainMenuDrop').toggleClass('show')
}, function() {
// nothing here
});
As jquery .hover binding is just syntax for mouseenter and mouseleave and you don't need mouseleave, this can be simplified to:
jQuery('.menuButton').on("mouseenter", function() {
jQuery('.mainMenuDrop').toggleClass('show');
});
div { border: 1px solid black; padding: 20px; width: 100px; }
.show { background-color: pink; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='menuButton'>point at me</div>
<div class='mainMenuDrop'>changes here</div>

how to display a div1 on hovering div2 and fading div1 on mouseout?

I want to display div1 on hovering div2 and disappear div1 only if mouse is not hovering both div1 and div2.
I tried using the following CSS and jquery. But the div1 disappears immadiately after unhovering div2 and i am unable to access the content of div1.
$(document).ready(function() {
$('.about').hover(
function() {
$('.showsection').slideDown(800).addClass('show');
}
, function() {
$('.showsection').slideToggle(800);
});
});
.showsection{
display:none;
}
.show{
display:block;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class=about>
<h1>About</h1>
</div>
<div class="showsection">
<h1>Title</h1>
</div>

This could be done by attaching mouseenter and mouseleave events to the elements you want to show/hide.
These are the requirements:
Show showsection when mouse enters about. This can be done using mouseenter on about
Hide showsection when mouse is not hovering over both showsection and about. This actually means checking two things: the mouse is not hovering showsection when it leaves about and the mouse is not hovering about when it leaves showsection. That means we have to attach mouseleave events to both showsection and about.
The below snippet should help.
// JS
$(document).ready(function() {
// mouse enters .about
$('.about').on('mouseenter', function() {
$('.showsection').slideDown(800);
});
// mouse leaves .about
$('.about').on('mouseleave', function() {
// if mouse is not hovering over .showsection hide it
if (!$('.showsection').is(':hover')) {
$('.showsection').slideToggle(800);
}
});
// mouse leaves .showsection
$('.showsection').on('mouseleave', function() {
// if mouse is not hovering over .about hide .showsection
if (!$('.about').is(':hover')) {
$('.showsection').slideToggle(800);
}
});
});
/* CSS */
.showsection {
display: none;
background: #ddd;
}
h1 { margin: 0; }
.about { background: #eee; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class=about>
<h1>About</h1>
</div>
<div class="showsection">
<h1>Title</h1>
</div>

The CSS :hover attribute will only control the element which it is assigned to, in your case presumable div1. So, you are going to have to use JavaScript.
With JavaScript attach a mouseenter and mouseleave event to div1. Inside those event listener functions, control what you want div2 to do.
That's basically how to do it.

How to set transition when button is clicked and it changes from display 'none' to display 'block'

I am trying to make it so, that when a button is clicked like a toggle, the texts and everything below it move smoothly below it instead of suddenly moving it. An example of this is bootstrap navbar hamburger menu. When the menu is clicked in mobile view, the rest of the items under it move in a smooth manner to make room for the navbar items.
Here are my codes in the snippet.
let box = document.querySelector("#box");
let seconddiv = document.querySelector("#seconddiv");
box.addEventListener("click", myfunc);
function myfunc() {
if(seconddiv.style.display == "none") {
seconddiv.style.display = "block";
}
else {
seconddiv.style.display = "none"
}
}
#box {
height: 50px;
width: 50px;
background-color: red
}
#seconddiv {
display: none;
}
<div id="box">
</div>
<div id="seconddiv">
<p>whats up</p>
<p>whats up</p>
<p>whats up</p>
<p>whats up</p>
<p>whats up</p>
</div>
<p>hello</p>
When I click the red box, the "hello" text moves instantly when the "seconddiv" is set to display. Is it possible to move "hello" smoothly like in bootstrap?

You can use jQuery for this purpose. jQuery can handle better and in easy way.
Please include jQuery file for following jQuery code:
$('#box').click(function(){
$('#seconddiv').slideToggle();
});
If you want more slow speed for displaying and hiding div on click, then pass "slow" parameter in slideToggle function.
$('#seconddiv').slideToggle("slow");

display:none is not handled with transitions. But you can add a class to the button with javascript on click. And then give the button height:30px when it has class '.clicked'
#seconddiv {
height: 0;
transition: height 0.5s
}
#seconddiv.clicked{
height: 30px;
}
You can work with width or opacity too instead of height, but the difference with opacity is that the element will still use the space even when set to opacity:0

How to change the background image "on click" with jQuery?

I'm trying to make animation effect for background, it should listen an event that will change images on click.
For instance, I click Sajo Hapyo it should change the background image.
Main issue is that all images will be having different background-images and I'm really stuck with this.
I used backgroundColor: green in my JS for test, since wanted to check, whether it works or not.
At the final version, the background images will be added and it should change on click with nice jquery UI (effect).
Here is screenshot
Please help me out
Here is my code
HTML
<section id="main-showcase">
<div class="showcase-wrapper">
<div class="left-main col-lg-3 col-md-3">
<div class="shadow-effect"><p class="ottogi">OTTOGI</p></div>
<div class="shadow-effect"><p class="sajo">Sajo Hapyo</p></div>
<div class="shadow-effect"><p class="natura">Natura Bogata</p></div>
<div class="shadow-effect"><p class="maloo">ТОО Малу</p></div>
<div class="shadow-effect"><p class="dongush">Dongsuh</p></div>
<div class="shadow-effect"><p class="may">ООО Май</p></div>
</div>
<div class="right-main col-lg-9 col-md-9">
<div class="inner-container">
<h1>Ottogi</h1>
<h2>Южно - Корейские продукты питания высочайшего качества!</h2>
</div>
<div class="box-container">
<div class="main-wrap">
<div id="main-slider" class="first-slider">
[[getImageList?
&tvname=`goods`
&tpl=`goodsSlider.tpl`
]]
</div>
</div>
</div>
</div>
</div>
</section>
JS
$('button.sajo').click(function () {
$('.right-main').animate({
backgroundColor: 'green',
}, 1500);
});

Actually instead of using the jQuery.animate(). You can simply toggle a class on the same element. It is a good practice to avoid animate() and using css3 animations instead.
codepen
Check the codepen sample here. It will explain how to use it. Instead of using keyframes and all. You can simply obtain it using trnasition.
span {
background-color: red;
padding: 10px;
transition: all 1.5s ease;
color: white;
}
.change-color {
background-color: blue;
}

First of all, I cannot see in the HTML the button where you apply the click event listener. However, I assume this button is located somewhere in your HTML code and what you want to do is change the background image on the main slider by clicking on it. To do so you simply have to do the following:
$('button.sajo').click(function () {
$('.right-main').animate({opacity: 0}, 'slow', function() {
$(this)
.css({'background-image': 'url(your_url)'}) //Change url to your image url
.animate({opacity: 1});
}
});
Note that since you do not specify the exact animation you want, I just provided an example with a fade in animation where opacity goes from 0 to 1. You can change this animation to a different one by changing the content of .animate() and leaving the .css() like i wrote there. Hope this helps!

You can use like that
var imageUrl = your image url
$('button.sajo').click(function () {
$('.right-main').css('background-image', 'url(' + imageUrl + ')');
});

.bgcolor{
animation: colorchange 50s; /* animation-name followed by duration in seconds */
/* you could also use milliseconds (ms) or something like 2.5s */
-webkit-animation: colorchange 50s; /* Chrome and Safari */
}
#keyframes colorchange
{
100% {background: green;}
}
#-webkit-keyframes colorchange /* Safari and Chrome - necessary duplicate */
{
100% {background: green;}
}`
Then add this class to the element you want to change the background of:
$('button.sajo').click(function () {
$('.right-main').addClass('bgcolor');
});

Slide div down when hover over other div, with timer

I searched for this but didn't find an solution that totally fixed my problem.
I got 2 divs that are over each other. Where div #2 isn't shown (display:none).
Now what I want is that if I hover over div #1, div #2 slides down (open) at his current position.
Then div #2 should stay open when people are hovering over div #2, when they leave the hover status of div #2 for more then 5 seconds div #2 slides up again.
I made a fiddle to illustrate my div positions.

Using jQuery to keep the code simpler. One way to do what you want is to pair a global variable with a setTimeout function. The timeout checks if the mouse is still out of the div after five seconds, and if so, slides it up and out of sight.
$('.button').click(function() {
$('.showme').slideDown();
});
$('.showme').mouseout(function() {
window.isoverdiv = false;
setTimeout(function() {
if (!window.isoverdiv) {
$('.showme').slideUp();
}
}, 5000);
});
$('.showme').mouseover(function() {
window.isoverdiv = true;
});
http://jsfiddle.net/mblase75/TxnDd/2/

I moved div #2 into div #1 and this allowed me to do this with only css
http://jsfiddle.net/57Shn/
CSS
.button {width:100px; height:50px; position:fixed; background-color:blue; margin-top:30px;}
.button:hover .showme {display:block}
.showme {width:100px; height:200px; position:fixed; background-color:red; display:none; margin-top:30px;}
HTML
<div class="button">
touch me
<div class="showme">show me</div>
</div>

CSS-only solution: (doesn't slide)
<div class="outer">
<div class="one">Hover</div>
<div class="two">Hello World!</div>
</div>
CSS:
.two { display: none; }
.outer:hover .two { display: block; }
JS solution:
$(function() {
$('.two').hide();
$('.outer').hover(function() { $('.two').stop().slideDown(); });
$('.outer').mouseout(function() { $('.two').stop().slideUp(); });
});