Develop Reference

Changing the hide show toggle effect?

I have an element that works just fine with the following code. It's an object #obj1 that is hidden when loading the page, but appears when clicking on #obj2.
#obj1{
position:fixed;
width:100px;
bottom:180px;
right:100px;
display:none;
}
$("#obj1").hide();
$("#obj2").show();$('#obj2').toggle(function(){
$("#obj1").slideDown(function(){});
},function(){
$("#obj1").slideUp(function(){});
});
but I would like to have it like this:
$("#obj1").css({"opacity": "0","bottom": "180"})
$("#obj2").toggle(
function () {
$("#obj1").animate({"opacity": "1","bottom": "140"}, "slow");
},function () {
$("#obj1").animate({"opacity": "0","bottom": "180"}, "slow");
});
I would like it to fade in, but how do I add the animation to the first script? (animation ex: .animate({"opacity": "1","bottom": "140"}, "slow");)

Here is a super simple demo of fading in an element using CSS. You can use jQuery to add the class through a click event.
// HTML
<div id="myId" class="hide">
This is div with myId
</div>
// CSS
.hide {
display: none;
}
.myId {
animation: fadein 2s;
}
#keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
// JQUERY
$("#myId").removeClass("hide").addClass("myId");
You can see a working demo here. You'll just have to modify it to trigger on click of obj2 or where you like
EDIT - As per your comment above I have edited the pen, so now the element will be hidden on page load and then the class will be removed and the animation class added.

You would be best keeping the styles within css, and just using js to change the state (add/remove a class). The way you have the javascript is passable, but it'd be better for the class to be toggled based on itself so they can't accidentally get out of sync:
$('#obj2').on('click',function(e){
e.preventDefault();
if($('#obj1').hasClass('js-on'))
$('#obj1').removeClass('js-on');
else
$('#obj1').addClass('js-on');
});
#obj1{
position:absolute;
width:100px;
bottom:10px;
right:20px;
opacity: 0;
background-color: yellow;
padding: 1em;
transition: .5s opacity, .5s bottom;
}
#obj1.js-on {
opacity: 1;
bottom: 40px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="obj2" href="#">Click me</a>
<div id="obj1">Hi</div>

$(document).ready(function() {
$("#obj1").hide();
$("#obj2").show();
});
$('#obj2').toggle(function(){
$("#obj1").slideToggle();
});
This will show obj1 by sliding when obj2 is pressed. To have it fade in instead Try,
$("#obj2").click(function () {
$("#obj1").fadeToggle("slow","swing");
This toggles obj1 fading in and out.
reference:
http://api.jquery.com/fadetoggle/

Slightly confused by the question, but here's my attempt at an answer: hope it helps
$(".obj1").click(function(){
$(".obj2").css('opacity', 0)
.slideDown('slow')
.animate(
{ opacity: 1 },
{ queue: false, duration: 'slow' }
);
});
.obj1 {
display: inline-block;
padding: 10px;
background: lightgrey;
}
.obj2 {
height: 100px;
width: 100px;
background: red;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="obj1">click me</div>
<div class="obj2"></div>

fade-in an incoming image, fade-out an out going image

I have a logo that I want to fade-in when I hover on the image, and then fade out and be replace by the original when I hover out of the image. I almost got it working but the image double fades-in with this approach and the image does not fade-out. Any changes that can be done here. Here is my html, js and css. Run live example:
$(".opening").hover(function() {
$(".opening img").animate({
opacity: 1
}, "slow");
$(".opening img").css({
"width": 250
});
$(".opening img").attr("src", "http://www.letsgodigital.org/images/producten/3376/pictures/canon-eos-sample-photo.jpg");
}, function() {
$(".opening img").animate({
opacity: 0
}, "slow");
$(".opening img").css({
"width": 150
});
$(".opening img").attr("src", "http://www.cameraegg.org/wp-content/uploads/2015/06/canon-powershot-g3-x-sample-images-3-620x413.jpg");
$(".opening img").animate({
opacity: 1
}, "slow");
});
.opening {
padding: 0 4.2%;
display: inline;
}
.opening img {
width: 150px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<div class="opening">
<img src="http://www.cameraegg.org/wp-content/uploads/2015/06/canon-powershot-g3-x-sample-images-3-620x413.jpg" />
</div>

You don't need JS for such simple :hover → fade tasks.
CSS is quite enough
.opening {
position: relative; /* add this */
display: inline-block; /* change */
}
.opening img {
width: 150px;
}
.opening img + img{ /* the second image */
position:absolute;
top:0;
transition: 0.8s; -webkit-transition: 0.8s;
visibility:hidden;
opacity:0;
}
.opening:hover img + img{
visibility:visible;
opacity:1;
width: 250px;
}
<div class="opening">
<img src="http://www.cameraegg.org/wp-content/uploads/2015/06/canon-powershot-g3-x-sample-images-3-620x413.jpg" />
<img src="http://www.letsgodigital.org/images/producten/3376/pictures/canon-eos-sample-photo.jpg" />
</div>
Also, if you change src using JS that means that your animation will always junk the first time since the image needs to be pulled from the server at the time you're trying to actually animate it.

try to use stop() to stop the currently-running animation

Why not this?
$(".opening").mouseenter(function(){
$(".opening img").fadeIn("slow", function () {
$(this).css({"width":250}).attr("src","http://www.letsgodigital.org/images/producten/3376/pictures/canon-eos-sample-photo.jpg");
});
}).mouseleave(function () {
$(".opening img").fadeOut("slow", function () {
$(this).css({"width":150}).attr("src","http://www.cameraegg.org/wp-content/uploads/2015/06/canon-powershot-g3-x-sample-images-3-620x413.jpg").fadeIn("slow");
});
});

jQuery hover effect on image

I am trying to get a simple hover effect with jQuery on an image.
What I want to get eventually is a green hovering effect, with a text appearing along with the color. I don't know if I'm being clear.
For now, I just want the simple color hover effect to work.
Here is what I did first:
$("img").hover(
function() {
wid = $(this).width();
hei = $(this).height();
$("<div id='hover'></div>").insertBefore(this);
$("#hover").css({
"background-color": "rgba(60,147,138,0.2)",
"width": wid,
"height": hei,
"z-index": "3",
"position": "absolute"
});
},
function() {
$("#hover").remove();
}
);
That code there is generating an empty div on top of my image with a transparent green background, to get that green hover effect. But it doesn't work great, and my guess is that the mouse is not on the image anymore, but on that div that has appeared just above it.
So I tried this then:
$("img").mouseenter(
function() {
wid = $(this).width();
hei = $(this).height();
$("<div id='hover'></div>").insertBefore(this);
$("#hover").css({
"background-color": "rgba(60,147,138,0.2)",
"width": wid,
"height": hei,
"z-index": "3",
"position": "absolute"
});
}
);
$("#hover").mouseleave(
function() {
$(this).remove();
}
);
The hover effect is stable as I expected, but the mouseleave event just doesn't work.
I don't know what to do.
Any help would be appreciated!
Edit: Oh, and here is the JSFiddle, just in case

A small digression first...
what you're trying to do can be easily done using CSS only and the :hover pseudo
.imgWrapper,
.imgWrapper img{
position:relative;
display:inline-block;
vertical-align:top;
}
.imgWrapper span{
position:absolute;
z-index:1;
top:0; bottom:0; left:0; right:0;
background:rgba(60,147,138,0.2);
padding:24px;
text-align:center;
color:#fff;
opacity:0;
transition: 0.3s;
font-size:2em;
}
.imgWrapper:hover span{
opacity:1;
}
<span class="imgWrapper">
<img src="http://lemagcinema.fr/wp/wp-content/uploads/2014/11/alain_delon_59055-1024x768-500x372.jpg" width="300">
<span>This is an<br>image caption!</span>
</span>
To answer your jQuery question
$("#hover").mouseleave(
at the time you're assigning that function there's no #hover element on the page.
this would do it:
$("img").mouseenter(function() {
var wid = $(this).width();
var hei = $(this).height();
$("<div id='hover' />").insertBefore(this);
$("#hover").css({
"background-color": "rgba(60,147,138,0.2)",
"width": wid,
"height": hei,
"z-index": "3",
"position": "absolute"
}).mouseleave(function() {
$(this).remove();
});
});
or even better you don't need the #ID at all: https://jsfiddle.net/q5r3a00x/5/
$("img").mouseenter(function() {
var wid = $(this).width();
var hei = $(this).height();
$("<div />", {
insertBefore : this,
mouseout : function(){
$(this).remove();
},
css : {
backgroundColor: "rgba(60,147,138,0.2)",
width: wid,
height: hei,
position: "absolute"
}
});
});

image OnMouse popout from container

I am making a website where I am placing an "ad" which I want to hide under the container div, but you can still see the tip of it. when you take your cursor over it I want it to smoothly come out from underneath the container. And when you remove the cursor i would want it to go back to it`s first position under the container. Anyone know a simple css, a jquery, or a javascript I can use?
Thanks!
Edit
Thanks for all the responses!
I am sorry if I just didn't get it, or if I was a bit unclear in my question, but i want the image to smoothly move horizontally from behind the my container on the right side to where my background is. so I want it to move and not just pop right out. So i basically want my picture to smoothly move back and fourth from underneath the container. When I place the cursor over the tip of the picture i want it to slowly move out from it's position under the container, and when i let go i want it to slowly go back. I see now that my title was a bit misleading, I'm sorry.
Hope someone can help me!

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<script>
$(document).ready(function(){
$("#demo").on({
mouseenter: function() {
var str = "background-color:red; height: 100px; width: 100px";
$(this).attr("style", str);
},
mouseleave: function() {
var str = "background-color:red; height: 10px; width: 10px";
$(this).attr("style", str);
}
});
});
</script>
<div id="demo" style="background-color:red; height: 10px; width: 10px"> <br/><br/><br/></div>

Use jQuery hover method:
$("#demo").hover(
function() {
$(this).css({'background-color', 'red'}).height(100).width(100);
},
function() {
$(this).css({'background-color', 'red'}).height(10).width(10);
}
);

This was fun
Live Demo
Script
$(function() {
$("#demo").on({
mouseenter: function () {
$(this).css({
"height": "100px",
"width": "100px"
});
},
mouseleave: function () {
$(this).css({
"height": "10px",
"width": "10px"
});
}
});
});
CSS
#demo {
background-color:red;
height: 10px;
width: 10px;
position:absolute;
top:100px;
left:100px;
overflow:hidden;
}
#main {
background-color:yellow;
height: 100px;
width: 100px;
position:absolute;
top:5px;
left:5px;
}
HTML
<div id="demo">This is an ad</div>
<div id="main">Here is a div</div>

Flickering CSS and Javascript dropdown

Here is the HTML for my menu:
<div class="navLink four">
<div>
this
<div class="subMenu">
link
link
</div>
</div>
</div>
I've got this jQuery to show and hide my menu:
$('.navLink div').hover(
function () {
$('.navLink div .subMenu').css({'display': 'none'});
$(this).find('.subMenu:first').slideDown();
},
function () {
$('.navLink div .subMenu').css({'display': 'block'});
$(this).find('.subMenu:first').slideUp();
}
);
And this CSS:
.navLink .subMenu {
display: none;
position: absolute;
}
.navLink > div:hover .subMenu {
display: block;
}
But the dropdown flikers a lot when you hover over it, I think I need some preventDefault() or something in my javascript.

Here's a JSfiddle to show the problem: http://jsfiddle.net/V5H3A/
Here is the solution: http://jsfiddle.net/jdfqW/1/
You need to stop the animation like so:
$('.navLink div').hover(
function () {
$('.navLink div .subMenu').css({'display': 'none'});
$(this).find('.subMenu:first').stop().slideDown();
},
function () {
$('.navLink div .subMenu').css({'display': 'block'});
$(this).find('.subMenu:first').stop().slideUp();
}
);
For even less lines of code you can do this http://jsfiddle.net/jdfqW/2/:
CSS:
.navLink .subMenu {
display: none;
position: absolute;
}
Javascript:
$('.navLink div').hover(
function () {
$(this).find('.subMenu:first').stop().slideToggle();
}
);
OR if you're SUPER adventurous you can do it all with only CSS3 like so http://jsfiddle.net/jdfqW/3/:
CSS
.navLink .subMenu {
height: 0px;
overflow: hidden;
position: absolute;
-webkit-transition:height 0.5s ease;
-moz-transition:height 0.5s ease;
transition:height 0.5s ease
}
.navLink:hover .subMenu {
height: 20px;
}

$('.navLink div a:first').mouseenter(function () {
$(this).next('.subMenu').slideDown(200);
}).mouseleave(function () {
$(this).next('.subMenu').slideUp(200);
});
Without any flickering ---> http://jsfiddle.net/WK7We/

use stop()... this will stop the running animation which i assume is causing the flickering...
$(this).find('.subMenu:first').stop().slideDown();
$(this).find('.subMenu:first').stop().slideUp();

Working jsFiddle Demo
Use .stop() method before .slideUp() and .slideDown():
$('.navLink div').hover(
function () {
$('.navLink div .subMenu').css({'display': 'none'});
$(this).find('.subMenu:first').stop().slideDown();
// HERE --------------------- ^
},
function () {
$('.navLink div .subMenu').css({'display': 'block'});
$(this).find('.subMenu:first').stop().slideUp();
// HERE --------------------- ^
}
);
References:
.stop() - jQuery API Documentation
Stop the currently-running animation on the matched elements.