We Keep Coding

anime.js - how do I combine animations with different timings?

I would like to apply 2 different anime.js animations on an element.
But only the last one is applied.
https://plnkr.co/edit/p5fRlznLA98056SxDmIh?p=preview
$(document).ready(function() {
anime({
targets: ".box",
duration: 2000,
loop: true,
easing: 'easeInOutSine',
direction: 'alternate',
translateX: 250
});
anime({
targets: ".box",
duration: 1000,
loop: true,
easing: 'easeInOutSine',
direction: 'alternate',
scale: 0.5
});
});

You can merge both animations into one, but the alternate direction can't be applied to specific properties.
But you can use keyframes to achieve a similar effect :
anime({
targets: ".box",
translateX: 250,
scale: [
{value: .5},
{value: 1}
],
duration: 2000,
easing: 'easeInOutSine',
direction: 'alternate',
loop: true
});

How to use multiple flexslider in different events

I am using two flexsliders on same page but in different events. Both flexsliders works fine. But second slider has some jerk for first time when the click event triggers.
$('#slider').flexslider({
animation: "slide",
easing: "swing",
direction: "horizontal",
controlNav: true,
asNavFor: '#slider2',
directionNav: true
});
$('.HowItWorks').click(function(){
$('#slider2').flexslider({
animation: "slide",
easing: "swing",
direction: "horizontal",
controlNav: true,
directionNav: true ,
sync: "#slider"
});
})

jQuery multi sliders change slide in one time

I'm using slidesjs and I want make multi sliders
I have 2 sliders #show and #show2, and I want that 2 slidersw work in 1 time: slides will be change in one time.
Now now 1 slider slides change earlier than 2, what is wrong in my code ?
I want that slides will change in one time:
<script>
$(function(){
$("#show").slidesjs({
width: 900,
height: 300,
navigation: false,
pagination: {active: false},
play: {
auto: true,
pauseOnHover: true,
effect: "fade",
},
effect: {
slide: {
speed: 200
},
fade: {
speed: 300,
crossfade: true
}
}
});
$("#show2").slidesjs({
width: 900,
height: 300,
navigation: false,
pagination: {active: false},
play: {
auto: true,
pauseOnHover: true,
effect: "fade",
},
effect: {
slide: {
speed: 200
},
fade: {
speed: 300,
crossfade: true
}
}
});
});
</script>
I try .ready but slides also change in different time

Give them both a class, and target them at the same time.
<div class="sliders" id="show"></div>
<div class="sliders" id="show2"></div>
JS:
$(".sliders").slidesjs({ ... });

Merging two "(document).ready(function()"s

I have two jquery/javascript codes but I couldn't merge them. Everytime one of the functions was disable. How can I merge the codes. Please help me, thanks.
First file:
jQuery.noConflict();
jQuery(function(){
jQuery('ul.menu-primary').superfish({
animation: {opacity:'show'},
autoArrows: true,
dropShadows: false,
speed: 200,
delay: 800
});
});
jQuery(function(){
jQuery('ul.menu-secondary').superfish({
animation: {opacity:'show'},
autoArrows: true,
dropShadows: false,
speed: 200,
delay: 800
});
});
//first ready function
jQuery(document).ready(function() {
jQuery('.fp-slides').cycle({
fx: 'scrollHorz',
timeout: 4000,
delay: 0,
speed: 400,
next: '.fp-next',
prev: '.fp-prev',
pager: '.fp-pager',
continuous: 0,
sync: 1,
pause: 1,
pauseOnPagerHover: 1,
cleartype: true,
cleartypeNoBg: true
});
});
second file:
function checkCopyRight(/*string*/url){
var copyrightLinks = $("a[href='" + url + "']");
return copyrightLinks.length > 0;
}
// second ready function
$().ready(function(){
if(!(checkCopyRight("http://e1.com")&&
checkCopyRight("http://e2.com")&&
checkCopyRight("http://e3.com"))){
alert("...");
}
});
I get a "Your post does not have much context to explain the code sections; please explain your scenario more clearly." message. There any character limit?

You actually have 3 Ready functions and one wannabe ready function. I've rewritten your code as it should be in one ready call. Give it a try:
function checkCopyRight(/*string*/url){
var copyrightLinks = jQuery("a[href='" + url + "']");
return copyrightLinks.length > 0;
}
jQuery.noConflict();
jQuery(function() {
jQuery('.menu-primary').superfish({
animation: {opacity:'show'},
autoArrows: true,
dropShadows: false,
speed: 200,
delay: 800
});
jQuery('.menu-secondary').superfish({
animation: {opacity:'show'},
autoArrows: true,
dropShadows: false,
speed: 200,
delay: 800
});
jQuery('.fp-slides').cycle({
fx: 'scrollHorz',
timeout: 4000,
delay: 0,
speed: 400,
next: '.fp-next',
prev: '.fp-prev',
pager: '.fp-pager',
continuous: 0,
sync: 1,
pause: 1,
pauseOnPagerHover: 1,
cleartype: true,
cleartypeNoBg: true
});
if(!(checkCopyRight("http://e1.com") && checkCopyRight("http://e2.com") && checkCopyRight("http://e3.com"))) {
alert("...");
}
})
$().ready(handler) (this is not recommended) [1]
Also, keep in mind, You dont really need noConflict unless you are using another JavaScript Library like MooTools or Prototype. A Plugin like Superfish is not relly a reason to call no Conflict. If there is no conflict, you can use $ as shorthand for jQuery instead of constantly rewriting jQuery.
$(document).ready is the same as JavaScript's .load function and since jQuery 1.0 you can use the shorthand version jQuery(function() { /* do work */ }) or $(function() { /* do work */ })
For more information:
.ready() (also info on noConflict)
.noConflict() (API Page)
My Blog on using jQuery (needs work, hoping to edit it this weekend, sorry)

jQuery(document).ready(function() {
jQuery('.fp-slides').cycle({
fx: 'scrollHorz',
timeout: 4000,
delay: 0,
speed: 400,
next: '.fp-next',
prev: '.fp-prev',
pager: '.fp-pager',
continuous: 0,
sync: 1,
pause: 1,
pauseOnPagerHover: 1,
cleartype: true,
cleartypeNoBg: true
});
if(!(checkCopyRight("http://e1.com")&&
checkCopyRight("http://e2.com")&&
checkCopyRight("http://e3.com"))){
alert("...");
}
});
You need to import the second file first since the first file uses a function inside second file.

Why does jQuery dialog shrink while fading out?

$("#dialog").dialog({
resizable: false,
height:140,
modal: true,
hide: {effect: "fadeOut", duration: 5000},
buttons: {
Save: function() {
alert("Saved");
$("#dialog").dialog( "close" );
},
Cancel: function() {
$("#dialog").dialog( "close" );
}
}
});
I'm using Chrome. Here's a demo.
When I close the dialog, it hides, but also shrinks.
I didn't tell it to shrink! Why does it do that?

Using fade instead of fadeOut will solve the issue.
Check this: http://jsbin.com/alafez/4/edit#preview

Because fadeIn and fadeOut are not valid values for the show and hide options. If you remove effect: "fadeOut", the result will be same. The valid option is fade.

$("#dialog").dialog({
resizable: false,
height:140,
modal: true,
hide: {effect: "fade", duration: 5000},
buttons: {
Save: function() {
alert("Saved");
$("#dialog").dialog( "close" );
},
Cancel: function() {
$("#dialog").dialog( "close" );
}
}
});