We Keep Coding

How to animate a text that both slides and fades in using JavasScript and/or JQuery?

I have searched on google and here but not been able to implement any of the tips. I'm not good at JS at all. What I want to do is to have a single line of text fade in while it's floating upwards when you hover on a div and the reverse when you stop hovering.
I have not been able to use both the slide and fade effects.
Here is my code using JQuery 2.3.1
$(function() {
// DOM ready
$('#card1').hover(
function() {
$('#artist1').slideDown();
},
function() {
$('#artist1').slideUp();
});
});
#artist1 {
position: absolute;
top: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="card1" style="width: 100px; height: 100px; background-color: red;">
<h4 id="artist1" class="artistname ">testname</h4>
</div>

See changes to style and tags:
$(function() {
var slideDuration = 300;
$('#card1').hover(
function() {
$('#artist1').stop(true, true)
.fadeIn({ duration: slideDuration*3, queue: false })
.css('display', 'none').slideDown(slideDuration);
},
function() {
$('#artist1').stop(true, true)
.fadeOut({ duration: slideDuration*1.5, queue: false })
.slideUp(slideDuration*3);
}
)
});
#artist1 {
position: relative;
top: -10px;
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="card1" style="width: 100px; height: 100px; background-color: red;"></div>
<h4 id="artist1" class="artistname ">testname</h4>

JQuery slow image change

I have 2 pictures.
<div class="work-default-row">
<img class="img1" src="/files/ourWork/titleImages/img1.jpg"/>
<img class="img2" src="/files/ourWork/titleImages/img2.jpg"/>
</div>
In CSS
.work-default-row {
position:relative;
}
.img1 {
width:100%;
height:400px;
}
.img2 {
position:absolute;
top:0px;
left:3000px;
width:100%;
height:400px;
}
and JavaScript
$(".work-default-row").hover(function(){
$(".img2", this).stop().animate({left:"0"},{queue:false,duration:200});
}, function() {
$(".img2", this).stop().animate({left:"3000px"},
{queue:false,duration:200});
});
It "works", on hover, the second image just came from nowhere and overlays the first image. But this solution is HORRIBLE.(The position of img1 is in the middle of page, So I can see how the img2 come from right through whole page and in resolution bigger than 3000px, user is able to see the second image)
Please, can somebody help me and tell me how can i make this images change effective?

If you have the width of the container you can set it to hide anything outside of it with.
#container_id{
overflow:hidden;
}
It looks like your using the work-default-view as your container.

Try this.
$(".slider").hover(
function() {
$(".slider-inner", this)
.stop()
.animate({ left: "0" }, { queue: false, duration: 200 });
},
function() {
$(".slider-inner", this)
.stop()
.animate({ left: "-100vw" }, { queue: false, duration: 200 });
}
);
.slider{
overflow: hidden;
}
.slider-inner {
width: 200vw;
position: relative;
display: flex;
flex-direction: row;
overflow:hidden;
}
img{
width: 100vw;
height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="slider">
<div class="slider-inner">
<img src="https://images.unsplash.com/photo-1538291397218-01e8830ddc68?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=fd07afd311ed4a74d0eed33089be01bb&auto=format&fit=crop&w=500&q=60" />
<img src="https://images.unsplash.com/photo-1538306196939-82f33cccacad?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=8c3ebd64083bb95f0b27c5d222b0f170&auto=format&fit=crop&w=500&q=60" />
</div>
</div>

Try changing width of img2 instead of left.
$(".work-default-row").hover(function() {
$(".img2", this).stop().animate({
width: "100%"
}, {
queue: false,
duration: 200
});
}, function() {
$(".img2", this).stop().animate({
width: "0"
}, {
queue: false,
duration: 200
});
});
.work-default-row {
position: relative;
}
.img1 {
width: 100%;
height: 400px;
}
.img2 {
position: absolute;
top: 0px;
width: 0;
height: 400px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="work-default-row">
<img class="img1" src="https://picsum.photos/200" />
<img class="img2" src="https://picsum.photos/200" />
</div>

appendTo is not working with each in jquery

I have to apply animation on each "div". But it is applying just in first one not in all.
According to me "$("#viewport").each(appendTo(c));" this line is not working in javascript code.
HTML code:
<div id="viewport"></div>
<div id="viewport"></div>
<div id="viewport"></div>
Javascript code:
$(window).load(function(){
$(function () {
var a = 0;
for (; a < 15; a += 1) {
setTimeout(function b() {
var a = Math.random() * 1e3 + 5e3,
c = $("<div />", {
"class": "smoke",
css: {
opacity: 0,
left: Math.random() * 200 + 80
}
});
**$("#viewport").each(appendTo(c));**
$.when($(c).animate({
opacity: 1
}, {
duration: a / 4,
easing: "linear",
queue: false,
complete: function () {
$(c).animate({
opacity: 0
}, {
duration: a / 3,
easing: "linear",
queue: false
})
}
}), $(c).animate({
bottom: $("#viewport").height()
}, {
duration: a,
easing: "linear",
queue: false
})).then(function () {
$(c).remove();
b()
});
}, Math.random() * 3e3)
}
}());
});

Use more than one element with the same id is absolutely bad practice! Put "vieport" as class and use
$( ".viewport" )
The .each() function take a function as first argument and in that function context, the "this" variable will contain the element
$( ".viewport" ).each( function() {
$( this ).appendTo( c );
});

If I am not wrong. You want something like this:
HTML:
<div id="viewport">
<div class="smoke smoke1"></div>
<div class="smoke smoke2"></div>
<div class="smoke smoke3"></div>
</div>
JS:
(function () {
"use strict";
$('#viewport .smoke').each(function ns () {
var initialTop = $(this).position().top;
$(this).animate({
top: - $(this).height()
}, Math.random() * 2000 + 2000, function () {
$(this).css({
top: initialTop,
opacity: 0
});
}).animate({
opacity: 1
}, ns)
});
}());
CSS:
#viewport {
position: relative;
width: 400px;
height: 300px;
margin: 100px auto;
border: 1px solid #333333;
overflow: hidden;
}
#viewport .smoke {
position: absolute;
width: 20px;
height: 40px;
background: rgba(0, 0, 0, 0.5);
}
#viewport .smoke1 {
left: 140px;
top: 260px;
}
#viewport .smoke2 {
left: 180px;
top: 260px;
}
#viewport .smoke3 {
left: 220px;
top: 260px;
}
Please see demo here: http://jsfiddle.net/1rf31eyL/
You may check another example demo here: http://gettycreations.com/

first of all
add function in $.each
like
"$("#viewport").each(
function(){
$(this).appendTo(c);
}
);
and then try this,
$("[id=viewport]")
When you use
$("#viewport")
it selects only the first element with the given ID.
However, when you select by attribute (e.g. id in your case), it returns all matching elements, like so:
$("[id=viewport]")

SetTimeout does not work correctly in jQuery

This is my code.
I want the images get larger after one second if I hold the mouse on each of them but there is no response from the setTimeout. Even when I put an alert() function at the beginning of the menuChanging() function, it runs but the rest of my code does not execute (it runs immediately, not after one second).

You are invoking the function menuChanging immediately on mouseover, instead you need to pass a function reference to setTimeout
$(function() {
$(".hormenu > div").hover(function() {
$(this).data('hoverTimer', setTimeout(menuChanging.bind(this), 1000));
}, function() {
var $this = $(this);
//if you move out before 1s then clear the timer
clearTimeout($this.data('hoverTimer'));
//when the mouse is moved out restore to initial state if required
if ($this.hasClass('current')) {
$this.toggleClass("current other").animate({
width: "100px",
opacity: "0.5"
}, 750, 'easeOutBounce');
}
});
});
function menuChanging() {
var duration = 750;
$(".hormenu > .current").not(this).toggleClass("current other").animate({
width: "100px",
opacity: "0.5"
}, duration, 'easeOutBounce');
$(this).removeClass("other").addClass("current").animate({
width: "600px",
opacity: "1"
}, duration, 'easeOutBounce');
}
.hormenu {
height: 500px;
width: 1800px;
}
img {
height: 100%;
width: 100%;
}
.hormenu div {
width: 100px;
overflow: hidden;
display: block;
float: left;
height: 100%;
}
.other {
opacity: 0.5;
}
img {
width: 600px;
}
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>
<div class="hormenu">
<div class="current">
<img src="http://img0.mxstatic.com/wallpapers/b844e6ef0e3320bc945a9b5b1cd196f9_large.jpeg" alt="" />
</div>
<div class="other">
<img src="http://img0.mxstatic.com/wallpapers/20c41d877dfbed0e52947f51846df781_large.jpeg" alt="" />
</div>
<div class="other">
<img src="http://img0.mxstatic.com/wallpapers/b844e6ef0e3320bc945a9b5b1cd196f9_large.jpeg" alt="" />
</div>
</div>

Here you can find a solution to your issue.
$(function(){
$(".hormenu div").mouseover(
function()
{
setTimeout(menuChanging($(this)),1000);
}
);
});
function menuChanging(div) {
return function(){
var duration = 750 ;
if (!div.hasClass("current")) {
$(".current").removeClass("current").addClass("other").animate({
width: "100px",
opacity: "0.5"
}, duration, 'easeOutBounce');
}
div.removeClass("other").addClass("current").animate({
width: "600px",
opacity: "1"
}, duration, 'easeOutBounce');
}
}
FIDDLE
You were calling the function and not passing it to setTimeout. I also changed some things to retrieve easily the div. The new function returns a function to call and this new function can access the first one's parameter.

Count back percentage using JQuery

I have the code below where I'd like to the numbers count back to 0% once hover the object out. Also I can't figure our how to make the value disappear again as it was on load. Could you please help me solve this.
Thanks in advance.
HTML
<div class="container">
<div class="fill" data-width="80%"></div>
</div>
<div class="container">
<div class="fill" data-width="50%"></div>
</div>
CSS
.container {
position: relative;
width: 300px;
height: 30px;
background-color: blue;
margin: 10px auto;
}
.fill {
height: 100%;
width: 0;
background-color: red;
line-height: 30px;
text-align: left;
z-index: 1;
text-align: right;
}
JQuery
$(function() {
$('.container').hover( function(){
var width=$(this).find(".fill").data('width');
$(this).find(".fill").animate({ width: width }, {
duration:800,
step: function(now, fx) {
$(this).html(Math.round(now) + '%');
}
});
},
function(){
$(this).find(".fill").animate({ "width": "0px" }, 800);
});
});
jsFiddle http://jsfiddle.net/zp8pe069/

jsBin demo
CSS: set overflow: hidden to .fill to prevent the text being visible after the animation ends.
HTML: remove % from the data attribute
JS and here you go. all you need:
$('.container').hover(function( e ){
var $fill = $(this).find(".fill");
var width = $fill.data('width');
$fill.stop().animate({width: e.type=="mouseenter" ? width+"%" : "0%" }, {
duration : 800,
step : function(now) {
$(this).html(Math.round(now) + '%') ;
}
});
});
Note also the use of the .stop() method, if you hover multiple time hysterically :) it'll prevent endless animations.