I want to make 4 buttons that are:
when you click on it,the one chosen, its background-image changed, the other 3 remain the original background image unless user hover it ,while user hover the buttons it changes its background-image .
If I only use :hover, or :active,after clicked,the background image will revert to original when I release mouse,or just moved away mouse, if I use click function, after it changed background image it cannot be revert or have to type a long piece codes to control it.What is the simplest way to make these 4 buttons?
I tried this: abit clumsy, I have :hover in css, but it is actually missing the hover effect for this code
$s_btn_1.on('click',function() {
if (chosen!=1){
chosen = 1;
console.log('chosen');
$.get("services_1.php", function(data){
// $service_box.html(data);
});
return_default();
$folder1.css('background',"url('images/services/btn1_hover.png')");
$folder1.css('background-size',"100% 100%");
}
});
$s_btn_2.on('click',function() {
if (chosen!=2){
chosen = 2;
console.log('chosen');
$.get("services_2.php", function(data){
// $service_box.html(data);
});
return_default();
$folder2.css('background',"url('images/services/btn2_hover.png')");
$folder2.css('background-size',"100% 100%");
}
});
$s_btn_3.on('click',function() {
if (chosen!=3){
chosen = 3;
return_default();
$folder3.css('background',"url('images/services/btn3_hover.png')");
$folder3.css('background-size',"100% 100%");
}
});
$s_btn_4.on('click',function() {
if (chosen!=4){
chosen = 4;
return_default();
$folder4.css('background',"url('images/services/btn4_hover.png')");
$folder4.css('background-size',"100% 100%");
}
});
//$("#service_btn").addClass(".folder1_hover");
function return_default(){
$folder1.css('background-image',"url('images/services/btn1.png')");
$folder2.css('background-image',"url('images/services/btn2.png')");
$folder3.css('background-image',"url('images/services/btn3.png')");
$folder4.css('background-image',"url('images/services/btn4.png')");
$folder1.css('background-size',"100% 100%");
$folder2.css('background-size',"100% 100%");
$folder3.css('background-size',"100% 100%");
$folder4.css('background-size',"100% 100%");
}
});
I just finished my aim so I post my code here, I think it is the simplest way,and clear
$(document).ready(function() {
var btns = {
'bg_o' : ['images/services/btn1.png','images/services/btn2.png','images/services/btn3.png','images/services/btn4.png'],
'bg_h' : ['images/services/btn1_hover.png','images/services/btn2_hover.png','images/services/btn3_hover.png','images/services/btn4_hover.png'],
'$all_btn' : $('.all_btn'),
'$folders':[$('#folder1'),$('#folder2'),$('#folder3'),$('#folder4')],
'folders_status':new Array('inactive','inactive','inactive','inactive')
,jquery_func : function(){
btns.$all_btn.each(function(){
$(this).click(function(){
for(i=0;i<4;i++){
var imageurl_o = new Array();
imageurl_o[i] = {'background-image':'url('+btns.bg_o[i]+')'};
btns.$folders[i].css(imageurl_o[i]);
btns.folders_status[i]='inactive';
}
for(i=0;i<4;i++){
var myparent = btns.$folders[i].parent();
if($(this).attr('class') == myparent.attr('class')){
var imageurl_h = {'background-image':'url('+btns.bg_h[i]+')'};
btns.$folders[i].css(imageurl_h);
btns.folders_status[i]='active';
}
}
});
$(this).mouseover(function(){
for(i=0;i<4;i++){
var imageurl_o = new Array();
imageurl_o[i] = {'background-image':'url('+btns.bg_o[i]+')'};
if(btns.folders_status[i]=='inactive')
btns.$folders[i].css(imageurl_o[i]);
}
for(i=0;i<4;i++){
var myparent = btns.$folders[i].parent();
if($(this).attr('class') == myparent.attr('class')){
var imageurl_h = {'background-image':'url('+btns.bg_h[i]+')'};
btns.$folders[i].css(imageurl_h);
}
}
});
});
}
}
btns.jquery_func();
});
Related
I just want to make an exit animation but I've got problems with the text inside the box which I want to hide.
$(".dropdown").click(function () {
var dropdownC = $(this).find(".dropdownc");
var dropdownUl = $(this).find("ul");
if (dropdownC.css("visibility") == "visible") {
dropdownC.removeClass("comein").addClass("comeout");
var hide = function () {
dropdownC.addClass("hide");
};
setTimeout(hide, 300);
} else {
dropdownC.removeClass("hide").removeClass("comeout").addClass("comein");
}
});
Here's the jsfiddle. Thank you for any help.
I would use display: block / none instead of visiblilty: visible / hidden
https://jsfiddle.net/dabvkmrL/1/
Hi everyone i have site I'm designing, but i need a effect to be change in the slider to getting sliced effect.
Current code & Site:
http://www.summerskymusic.net
// options
var accordion = $(this);
var items = accordion.find(':has('+options.slider+')');
items.each(function(){
var item = $(this);
var opener = item.find(options.opener);
var slider = item.find(options.slider);
opener.bind(options.event, function(e){
if(!slider.is(':animated')) {
if(item.hasClass(options.activeClass)) {
if(options.collapsible) {
slider.slideUp(options.animSpeed, function(){
hideSlide(slider);
item.removeClass(options.activeClass);
});
}
} else {
// show active
var levelItems = item.siblings('.'+options.activeClass);
var sliderElements = levelItems.find(options.slider);
item.addClass(options.activeClass);
showSlide(slider).hide().slideDown(options.animSpeed);
// collapse others
sliderElements.slideUp(options.animSpeed, function(){
levelItems.removeClass(options.activeClass);
hideSlide(sliderElements);
});
}
}
e.preventDefault();
});
if(item.hasClass(options.activeClass)) showSlide(slider); else hideSlide(slider);
});
});
};
Example of What i want to achieve site:
http://tympanus.net/Development/Slicebox/
Thank you.
I am trying to make a small animation by moving the background position (frames) of the image which is background on my div. I am using Jquery to make this animation happen. I have 6 frames on the background image, first frame starting at 0,0px, second starting at 85px,0, third at 172px,0 and so on.
I want to transition between these frames until stop is clicked. My jquery code is pasted below. I have made an array for the pixels to move across. I want each frame to hold upto 1000 milliseconds, then transition to next frame. I am going wrong somewhere but unable to figure out where..
here is my code
$(document).ready(function () {
var timer;
$("#clickMe").click(function() {
//alert("you are here");
timer=setInterval(moveframe,1000);
});
$("#stop").click(function() {
clearInterval(timer);
});
});
function moveframe() {
var framespx=[0,85,172,256,512,1024];
for (var i=0;i<framespx.length;i++) {
alert("you ar here");
var xPos=framespx[i]+"px ";
var yPos="0px";
$('.fixed').css({backgroundPosition: xPos+yPos});
}
}
your code looks like has some logical error,run your code ,just can see the same background.
try:
$(document).ready(function () {
var timer;
$("#clickMe").click(function() {
//alert("you are here");
timer=setInterval(moveframe,1000);
});
$("#stop").click(function() {
clearInterval(timer);
});
});
var j=0;
function moveframe() {
var framespx=[0,85,172,256,512,1024];
for (var i=0;i<framespx.length;i++) {
if (j%framespx.length == i){
alert("you ar here");
var xPos=framespx[i]+"px ";
var yPos="0px";
$('.fixed').css({backgroundPosition: xPos+yPos});
j++
break;
}
}
}
css({'background-position': xPos+' '+yPos});
okay the above attribute value is a bit confusing for me, hopefully that is correct but with more surety;
css('background-position-x', xPos);
css('background-position-y', yPos);
Now I don't think for loop is mandatory here
var posAry=[0,85,172,256,512,1024];
var currPos=0;
var timer;
$(document).ready(function () {
$("#start").click(function() {
timer=setInterval(move,1000);
});
$("#stop").click(function() {
clearInterval(timer);
});
});
function move() {
$('.fixed').css({'margin-left': posAry[currPos]+'px' }); /**you can change it to background postion/padding/... as needed by you**/
currPos++;
if(currPos==(posAry.length))
currPos=0; // for looping back
}
http://jsfiddle.net/7PvwN/1/
I''m using this library in my project : jQuery Tools Tabs, and from what I've read I can make my custom effect instead of having the default one.
I decided to have an effect like this one : Demo . And I found something that could be similar, but I'm having trouble implementing it.
$.tools.tabs.addEffect("subFade", function(tabIndex, done) {
var conf = this.getConf(),
speed = conf.fadeOutSpeed,
panes = this.getPanes();
var $tab = this.getCurrentTab();
if($tab.hasClass("current")){//Going AWAY from the tab, do hide animation (before the tab is hidden)
$(".tabs-tab").animate({"left" : "0px"}, 300, function(){//I was sliding it behind the tabs when not in use, replace with your own animation
panes.hide();
panes.eq(tabIndex).fadeIn(200, done);
console.log("Done done");
//This is then end of the chain - my animation, hide all then fade in new tab.
});
} else {//going away from any other tab
panes.hide();
panes.eq(tabIndex).fadeIn(200, done);
}
$tab = this.getTabs().eq(tabIndex);
if($tab.hasClass("current")){//Going to my special tab.
$(".tabs-tab").animate({"left" : "-160px"}, 300);//Sliding it out
}
// the supplied callback must be called after the effect has finished its job
done.call();
});
The above is what I have been trying but without success. So I was wondering if someone knows what I'm doing wrong and how can I make that custom effect behave like the demo ?
I have made a content slider similar to your example (however it does Not have FadeIn/Out functionality), but maybe with some modification of my code you can make that effect.Fiddle here
My full code:
$(document).ready(function() {
$('.slides div:not(:first)').hide();
$('.slides div:first').addClass('active');
//Put .active width in var
var activeWidth = $(".active").outerWidth();
$('.control p:first').addClass('current');
$('.control p').click(function() {
/*store P index inside var*/
var Pindex = $(this).index();
/* Store the slides in var*/
var slidePosition=$('.wrapper .slides div');
/* check if ACTIVE slide has GREATER index than clicked P TAG (CONTROLS)*/
if($(".wrapper .slides div.active").index() > $('.wrapper .slides div').eq(Pindex).index()) {
/*Show the slide equal to clicked P-TAG(CONTROLS)*/
slidePosition.eq(Pindex).show();
/*Add class "current" to the clicked control*/
$(this).addClass('current').prevAll('.current').removeClass('current');
$(this).nextAll('.current').removeClass('current');
$(".active").removeClass("active");
$(".slides").css({"margin-left":-activeWidth});
/*Start animation...*/
$(".slides").animate({marginLeft:activeWidth-activeWidth},1000,function() {
slidePosition.eq(Pindex).addClass("active");
$(".slides").css({"margin-left":"0px"});
$(".active").prevAll().hide();
$(".active").nextAll().hide();
});
}
if($('.slides').is(':animated')) {
return false;
}
if($(this).is($(".current"))) {
return false;
}
if($(".wrapper .slides div.active").index() < $('.wrapper .slides div').eq(Pindex).index()) {
slidePosition.eq(Pindex).show();
$(this).addClass('current').prevAll('.current').removeClass('current');
$(this).nextAll('.current').removeClass('current');
$(".active").removeClass("active");
$(".slides").animate({marginLeft:-activeWidth},1000,function() {
slidePosition.eq(Pindex).addClass("active");
$(".slides").css({"margin-left":"0px"});
$(".active").prevAll().hide();
$(".active").nextAll().hide();
});
}
});
$(".left").click(function() {
if($('.slides').is(':animated')) {
return false;
}
if($(".active").prev().length===0) {
//alert("no prev");
$(".active").nextAll().clone().insertBefore(".active");
$(".active").removeClass("active").prev().addClass("active");
$(".active").show();
$(".slides").css({"margin-left":-activeWidth});
$(".slides").animate({marginLeft:activeWidth-activeWidth},1000,function() {
$(".active").next().insertBefore($(".slides div:first")).hide();
var activeIndex = $(".active").index();
$(".active").nextAll().remove();
$(".current").removeClass("current");
//alert(activeIndex)
$(".control p").eq(activeIndex).addClass("current");
});
}
else{
$(".active").removeClass("active").prev().addClass("active");
$(".active").show();
$(".slides").css({"margin-left":-activeWidth});
$(".slides").animate({marginLeft:activeWidth-activeWidth},1000,function() {
var activeIndex = $(".active").index();
$(".active").prevAll().hide();
$(".active").nextAll().hide();
$(".current").removeClass("current");
$(".control p").eq(activeIndex).addClass("current");
});
}
});
$(".right").click(function() {
if($('.slides').is(':animated')) {
return false;
}
if($(".active").next().length===0) {
//alert("no next")
$(".slides div:first").nextAll(':not(.active)').clone().insertAfter(".active");
$(".slides div:first").insertAfter(".active");
$(".active").removeClass("active").next().addClass("active");
$(".active").show();
$(".slides").animate({marginLeft:-activeWidth},1000,function() {
$(".active").prev().hide().insertAfter(".slides div:last");
$(".slides").css({"margin-left":"0px"});
$(".active").prevAll().remove();
$(".current").removeClass("current");
var activeIndex = $(".active").index();
$(".control p").eq(activeIndex).addClass("current");
});
}
else{
$(".active").removeClass("active").next().addClass("active");
$(".active").show();
$(".slides").animate({marginLeft:-activeWidth},1000,function() {
$(".slides").css({"margin-left":"0px"});
$(".active").prevAll().hide();
$(".active").nextAll().hide();
$(".current").removeClass("current");
var activeIndex = $(".active").index();
$(".control p").eq(activeIndex).addClass("current");
});
}
});
});
I'm using the Pixastic plugin in JavaScript. I have a table filled with images that are blurred. When I go over them with the mouse I want them to get normal. And when the mouse leaves an image I want it to blur back. For some reason my code doesn't work. Here's the code:
Before, I copied the wrong code part, and I apologize for that this one is the one I'm asking about.
<script type="text/javascript">
$(document).ready(function(){
$('.photography').live('mouseover mouseout', function(event) {
if (event.type == 'mouseover') {
function () {Pixastic.revert('this');};
}
else {
function(){Pixastic.process('this', "blurfast", {amount:0.5});};
}
});
});
</script>
OK, so I managed to find my old code that actually works half way (when I hover over the image for the first time it works, but when I try for the second time it doesn't).
$(document).ready(function(){
var blur = function() {Pixastic.process(this, "blurfast", {amount:0.5});};
var unblur = function () {Pixastic.revert(this);};
$('.photography').each(blur);
$('.photography').hover(unblur,blur);
});
OK, so now I'm also adding the code for the function called revert:
revert : function(img) {
if (Pixastic.Client.hasCanvas()) {
if (img.tagName.toLowerCase() == "canvas" && img.__pixastic_org_image) {
img.width = img.__pixastic_org_width;
img.height = img.__pixastic_org_height;
img.getContext("2d").drawImage(img.__pixastic_org_image, 0, 0);
if (img.parentNode && img.parentNode.replaceChild) {
img.parentNode.replaceChild(img.__pixastic_org_image, img);;
}
return img;
}
}
else
if (Pixastic.Client.isIE()) {
if (typeof img.__pixastic_org_style != "undefined")
img.style.cssText = img.__pixastic_org_style;
}
}
So yesterday my friend discovered how this could be done ... the problem was that the plugin converts images into canvas anyway her's the code :
$(document).ready(function(){
$('.pic').each(function(){
this.onmouseout = function(){
var canvas1 = Pixastic.process(this, "blurfast", {amount:0.5});
canvas1.onmouseover = function(){
Pixastic.revert(this);
}
}
this.onload = function(){
var canvas = Pixastic.process(this, "blurfast", {amount:0.5});
canvas.onmouseover = function(){
Pixastic.revert(this);
}
}
});
});
Try doing this
$('.photography').live('mouseenter', function(event){
Pixastic.revert(this);
}).live('mouseleave', function(event){
Pixastic.process(this, "blurfast", {amount:0.5});
});