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>

How to animate the ajax/json response?

This is my piece of HTML code
<div class='qna_div'>
<div class="q_div"></div>
<div class="a_div"></div>
</div>
I make a Ajax request and get a json response for every click by the user and i append the q_div and a_div using the jquery function
$('.q_div').append(data.question);
$('.a_div').append(data.answer);
I have css keyframe animation on both q_div and a_div to come from right to left of the screen. But the animation works only on the first load of the page and not on the 'append' function for the json response. I am new to css and animations. help me out for the responsive animations
animation in css3 code:
.q_div {
animation: q_ani 2s;
}
#keyframes q_ani {
from{margin-left: 50px;}
to{margin-left: default;}
}

a possible solution using css animation
$(function() {
var cssAnimationEnd = "webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend";
$('.click').click(function() {
$('.q_div, .a_div').addClass("animate").one(cssAnimationEnd , function() {
$('.q_div, .a_div').removeClass("animate");
});
});
})
.q_div.animate {
animation: q_ani 2s;
}
.a_div.animate {
animation: q_ani 2s;
}
#keyframes q_ani {
from {
margin-left: 150%;
}
to {
margin-left: default;
}
}
/*for test purpose*/
.q_div,
.a_div {
position: relative;
height: 20px;
width: 500px;
background: #ddd;
margin-top: 10px;
}
.qna_div {
padding: 20px;
width: 500px;
background: #333;
}
body {
overflow: hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="click">go</button>
<div class='qna_div'>
<div class="q_div"></div>
<div class="a_div"></div>
</div>

You should delete and add .q_div class each time you need animation appear

You could use jquery to animate your divs. Put this code in the success ajax callback:
// First put your divs to the right
$('.q_div, .a_div').css('right','0');
// Do the animation
$('.q_div, .a_div').animate({
left: 0,
}, 1000);
https://jsfiddle.net/a8cq9yj1/1/

I hope it can help you,i just simple using the classList function and some SASS style rule
http://jsbin.com/vosuvam/2/edit?js,output

jquery - img hover add style

i'm using the code below from http://webdesignandsuch.com/create-overlay-on-image-hover-jquery-css3/ to prepend a span to my images. the script works fine but i need more style-values to be inserted into the span.
$(function() {
// OPACITY OF BUTTON SET TO 0%
$(".roll").css("opacity","0")
// ON MOUSE OVER
$(".roll").hover(function () {
var s = $(this).siblings('img');
var w = s.css("width");
var h = s.css("height");
// SET OPACITY TO 70%
$(this).css("height",h).css("width",w).stop().animate({
opacity: .7
}, "slow");
},
// ON MOUSE OUT
function () {
// SET OPACITY BACK TO 50%
$(this).stop().animate({
opacity: 0
}, "slow");
});
});
the img-markup is something like this
<span class="roll" style="height: 137px; width: 172px; opacity: 0;"></span>
<img width="172" height="135" class="img-responsive-rte" alt="" src="img/butterflower.jpg" style="padding-right: 10px; padding-bottom: 10px; float: left;">
is there a way to add the padding and foat values to the span?
thanks for your help

Simply add padding and float next to other rules:
$(this).css("height",h).css("width",w).css("padding", "10px"). css("float", "left").stop().animate({
opacity: .7
}, "slow");
It's better to assign all css rules toghether:
$(this).css({"height":h, "width":w, "padding":"10px", "float":"left"}).stop().animate({
opacity: .7
}, "slow");

I need to close a gap in this JQuery animation

Here is my Jquery code:
var img = function() {
$(".slider#1").delay(1000).fadeIn(1000);
$(".slider#1").delay(3000).fadeOut(1000);
$(".slider#2").delay(5000).fadeIn(2000);
$(".slider#2").delay(3000).fadeOut(1000);
$(".slider#3").delay(10000).fadeIn(2000);
$(".slider#3").delay(3000).fadeOut(1000);
$(".slider#4").delay(15000).fadeIn(2000);
$(".slider#4").delay(3000).fadeOut(1000, function() { img() });
};
Essentially what I am trying to do is when one image fades out I would like an image to almost be behind it and fade straight into that without being a blank space in between, is this possible?

You could use the jQuery fadeTo function.
Like
$(".slider#1").fadeTo(1000,1);
And make all your sliders overlap each other with opacity 0.
Edit :
You can try this fiddle :
http://jsfiddle.net/8cwA6/22/
It recursively changes the opacity. All the images are on top of each other, then it fades out Level 1, then Level 2, and then fades both of them back (because Level 3 is on the bottom). You'll probably understand better when you see the code.
JavaScript
var max = 3
var min = 1
var showTime = 1500
function fade(num) {
if (num > min) {
$('.' + num).delay(showTime).fadeTo("slow", 0, function() {
fade(num - 1);
});
} else {
$("div").delay(showTime).fadeTo("slow", 1, function() {
fade(max)
});
}
}
fade(3);
HTML
<div id="img1" class="1"></div>
<div id="img2" class="2"></div>
<div id="img3" class="3"></div>
CSS
#img1 {
width:100px;
height:100px;
background-color:red;
position:absolute;
top:0;
left:0;
opacity :1;
z-index :1;
}
#img2 {
width:100px;
height:100px;
background-color:blue;
position:absolute;
top:0;
left:0;
opacity :1;
z-index :2;
}
#img3 {
width:100px;
height:100px;
background-color:green;
position:absolute;
top:0;
left:0;
opacity :1;
z-index :3;
}

You have to queue the animations, or they will get mixed up after some time, since your animations are running asynchronous;
I did stack all images, and all are visible (you could set z-index just to be certain).
Fading out the top most, the next one is showing up.
The bottom most, doesn't have to be faded. I fade in the first one again, before resetting/showing all the other images once again and resetting the recursion.
jsfiddle
http://jsfiddle.net/Drea/hkzbvew4/
js
var images = ['.slider1', '.slider2', '.slider3', '.slider4']; // .slider4 is always visible
var img = function (i, showtime, fadetime) {
$(images[i]).delay(showtime).fadeOut(fadetime).queue(function () {
i++;
if (i < images.length-1) { // run through images
img(i, showtime, fadetime);
$.dequeue(this);
} else { // reset animation
$(images[0]).delay(showtime).fadeIn(fadetime).queue(function () {
$(".slide").fadeIn(0);
img(0, showtime, fadetime);
$.dequeue(this);
});
$.dequeue(this);
}
});
};
img(0, 1000, 1000);
html
<div class="slide slider4"></div>
<div class="slide slider3"></div>
<div class="slide slider2"></div>
<div class="slide slider1"></div>
css
.slide {
width: 50px;
height: 50px;
position: absolute;
top: 50px;
left: 50px;
}
.slider1 {
background-color: black;
}
.slider2 {
background-color: green;
}
.slider3 {
background-color: blue;
}
.slider4 {
background-color: red;
}

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.