How to make div transition smooth - javascript

Upon clicking on the checkbox I want one element appears smoothly and other disappears smoothly
I have used UI Kit.
Here is the code of my attempt:
https://codepen.io/Abdubek/pen/wvwdaoE
UIkit.util.on("#button", 'click', function() {
UIkit.toggle("#red", {
animation: "uk-animation-fade"
}).toggle();
UIkit.toggle("#blue", {
animation: "uk-animation-fade"
}).toggle();
})
.red {
width: 250px;
height: 250px;
background: red;
}
.blue {
width: 250px;
height: 250px;
background: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.7/js/uikit-icons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.1.7/js/uikit.min.js"></script>
<div class="uk-container uk-flex uk-flex-center uk-flex-middle uk-flex-column">
<input type="checkbox" id="button" class="uk-button uk-button-primary uk-margin-bottom" />
<div id="red" class="red"></div>
<div id="blue" aria-hidden="true" hidden class="blue"></div>
</div>


$(document).ready(function(){
$('#button').change(function(){
if($(this).is(':checked')){
$('#red').addClass('blue');
}
else {
$('#red').removeClass('blue');
}
});
});
#red {
width: 250px;
height: 250px;
background: red;
transition: all 2s linear;
}
.blue {
width: 250px;
height: 250px;
background: blue !important;
transition: all 2s linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="uk-container uk-flex uk-flex-center uk-flex-middle uk-flex-column">
<input type="checkbox" id="button" class="uk-button uk-button-primary uk-margin-bottom"/>
<div class="main-container">
<div id="red">
</div>
</div>
</div>


Solved:
<link href="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.2.0/css/uikit.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.2.0/js/uikit-icons.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/3.2.0/js/uikit.min.js"></script>
<div class="uk-container uk-padding uk-flex uk-flex-center uk-flex-middle uk-flex-column">
<p class="box box-first uk-card uk-card-default uk-card-body uk-text-muted uk-flex
uk-flex-middle uk-flex-center uk-text-lead uk-margin-remove">BOX [ A ]</p>
<p class="box box-second uk-background-primary uk-card uk-card-default uk-card-body uk-light uk-flex uk-flex-middle uk-flex-center uk-text-lead uk-margin-remove" hidden>BOX [ B ]</p>
<button
class="uk-button uk-button-default uk-margin"
type="button"
uk-toggle="target: .box; animation: uk-animation-fade; queued: true; duration: 300"
>Toggle Box</button>
</div>


You just need to stack one box on top of the other
.uk-container{
position : relative;
}
.red,.blue{
position:absolute;
top:50px
}


As you used checkbox you need to check checkbox is check or uncheck , I used jquery to solve this,
$(document).ready(function(){
$('#button').change(function(){
if($(this).is(':checked')){
$('#red').hide();
$('#blue').show();
}
else {
$('#red').show();
$('#blue').hide();
}
});
});
.red {
width: 250px;
height: 250px;
background: red;
transition: all 2s linear;
}
.blue {
width: 250px;
height: 250px;
background: blue;
transition: all 2s linear;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div class="uk-container uk-flex uk-flex-center uk-flex-middle uk-flex-column">
<input type="checkbox" id="button" class="uk-button uk-button-primary uk-margin-bottom"/>
<div class="main-container">
<div id="red" class="red">
</div>
<div id="blue" aria-hidden="true" hidden class="blue">
</div>
</div>
</div>

Related

How to fade child div when parent is hovered

I have a div that has class name ordershape and it contains another div fad-res.
I want that when I would hover over a particular ordershape, I want to show the corresspondingfad-res whose parent div I hovered, while other divs must be hidden.
<div class="ordershape">
<div class="fad-res">1</div>
</div>
<div class="ordershape">
<div class="fad-res">2</div>
</div>
<div class="ordershape">
<div class="fad-res">3</div>
</div>

Your HTML is invalid since you haven't closed the div with the class ordershape
No reason to use jquery for this, CSS can easily achieve this:
.ordershape:hover .fad-res{
display:block;
}
Demo CSS
.fad-res{
display:none;
}
.ordershape{
height:30px;
width:30px;
background-color:yellow;
}
.ordershape:hover .fad-res{
display:block;
}
<div class="ordershape"> <div class="fad-res">1</div>
</div>
<div class="ordershape"> <div class="fad-res">2</div>
</div>
<div class="ordershape"> <div class="fad-res">3</div>
</div>
If you want to do it with jquery do it like this.
$(".ordershape").mouseenter(function() {
$(this).find(".fad-res").show();
}).mouseleave(function() {
$(this).find(".fad-res").hide();
});
Demo jQuery
$(".ordershape").mouseenter(function() {
$(this).find(".fad-res").show();
}).mouseleave(function() {
$(this).find(".fad-res").hide();
});
.fad-res{
display:none;
}
.ordershape{
height:30px;
width:30px;
background-color:yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="ordershape"> <div class="fad-res">1</div>
</div>
<div class="ordershape"> <div class="fad-res">2</div>
</div>
<div class="ordershape"> <div class="fad-res">3</div>
</div>

Do not use javascript for that - rely on the CSS transition and opacity properties instead, with :hover selector.
.fad-res {
-webkit-transition: opacity .3s ease-in-out;
transition: opacity .3s ease-in-out;
opacity: 0;
background: #555555;
height: 60px;
width: 100px;
}
.ordershape {
background: #f6f6f6;
height: 100px;
width: 100px;
float: left;
margin-right: 2px;
}
.ordershape:hover .fad-res {
opacity: 1;
}
<div class="ordershape">
<div class="fad-res">1</div>
</div>
<div class="ordershape">
<div class="fad-res">2</div>
</div>
<div class="ordershape">
<div class="fad-res">3</div>
</div>

Well, you can try the jquery version this way
$(".ordershape").hover(function(){
$(this).find(".fad-res").toggle();
})
.fad-res{
display : none;
}
.ordershape{
width : 20px;
height: 20px
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="ordershape">
<div class="fad-res">1</div>
</div>
<div class="ordershape">
<div class="fad-res">2</div>
</div>
<div class="ordershape">
<div class="fad-res">3</div>
</div>

Add ease out effect with jQuery

I need to add an ease effect to the .dropdown div when it becomes visible with jQuery, but I'd be happy to do it with CSS as well. Any ideas? Thanks in advance :)
$('.btn').bind('click', function (){
$(this).parent().next('.dropdown').toggleClass('open');
});
.top,
.bottom {
background: #333;
height: 50px;
}
.dropdown {
height: 50px;
position: absolute;
color: black;
visibility: hidden;
}
.open {
position: relative;
visibility: visible;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="top">
<button class="btn">Show content</button>
</div>
<div class="dropdown">
<p>Hidden content</p>
</div>
<div class="bottom">
</div>
https://jsfiddle.net/319zd1sg/1/

1 second fade in (https://jsfiddle.net/nh2fj27g/1/).
$('.btn').bind('click', function (){
var $dropdown = $(this).parent().next('.dropdown');
$dropdown.hasClass('open') ? $dropdown.toggleClass('open').animate({opacity: 0},1000) : $dropdown.css({opacity: 0}).toggleClass('open').animate({opacity: 1},1000);
});

Hope this helps.
$('.btn').bind('click', function() {
$('#drop').slideDown('slow');
});
.top,
.bottom {
background: #333;
height: 50px;
}
.dropdown {
display: block;
color: black;
width: 100%;
}
.drop {
display: none;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="top">
<button class="btn">Show content</button>
</div>
<div id="drop" class="drop">
<div class="dropdown">
<p>Hidden content</p>
</div>
</div>
<div class="bottom">
</div>

Hover div another div appear on top

I'm creating something like this. When I hover the buttons upper content will change but each buttons have different content.
But I cannot see the content when hovering it :(
Does anybody know how to fix it? or is there any jquery fix?
Thanks in advance
#service-content {
display: none;
opacity: 1;
height: 200px;
-webkit-animation: flash 1.5s;
animation: flash 1.5s;
}
#-webkit-keyframes flash {
0% {
opacity: .4;
}
100% {
opacity: 1;
}
}
#keyframes flash {
0% {
opacity: .4;
}
100% {
opacity: 1;
}
}
#home-button-1:hover~#service-content .construction-neuve,
#home-button-2:hover~#service-content .renovation-residentiel,
#home-button-3:hover~#service-content .service-de-plan-et-design,
#home-button-4:hover~#service-content .entrepreneur-commercial,
#home-button-5:hover~#service-content .apres-sinistre,
#home-button-6:hover~#service-content .decontamination-d-amiante
{
display: block;
opacity: 1;
-webkit-animation: flash 1.5s;
animation: flash 1.5s;
}
#slider-buttons .span4 {
width: 383px;
float:left;
height:50px;
}
#slider-buttons .image-content {
position: relative;
}
#slider-buttons .image-caption {
background: #000000 none repeat scroll 0 0;
bottom: 0;
color: #6e6e6e;
padding: 10px 0;
position: absolute;
text-align: center;
text-transform: uppercase;
width: 383px;
font-weight: 600;
}
#slider-buttons .image-caption:hover {
background: #ba9444 none repeat scroll 0 0;
bottom: 0;
color: #000000;
padding: 10px 0;
position: absolute;
text-align: center;
text-transform: uppercase;
width: 383px;
font-weight: 600;
cursor: pointer;
}
<div id="service-content">
<div class="construction-neuve">
content
</div>
<div class="renovation-residentiel">
content
</div>
<div class="service-de-plan-et-design">
content
</div>
<div class="entrepreneur-commercial">
content
</div>
<div class="apres-sinistre">
content
</div>
<div class="decontamination-d-amiante">
content
</div>
</div>
<div id="slider-buttons" class="span12">
<div id="construction-neuve" class="span4 m-l00">
<div class="image-content">
<img src="images/home-buttons/home-button-1.jpg">
<div id="home-button-1" class="image-caption">Construction Neuve</div>
</div>
</div>
<div id="renovation-residentiel" class="span4 m-l10">
<div class="image-content">
<img src="images/home-buttons/home-button-2.jpg">
<div id="home-button-2" class="image-caption">Rénovation Résidentiel</div>
</div>
</div>
<div id="service-de-plan-et-design" class="span4 m-l10">
<div class="image-content">
<img src="images/home-buttons/home-button-3.jpg">
<div id="home-button-3" class="image-caption">Service de plan et design</div>
</div>
</div>
<div id="entrepreneur-commercial" class="span4 m-l00">
<div class="image-content">
<img src="images/home-buttons/home-button-4.jpg">
<div id="home-button-4" class="image-caption">Entrepreneur Commercial</div>
</div>
</div>
<div id="apres-sinistre" class="span4 m-l10">
<div class="image-content">
<img src="images/home-buttons/home-button-5.jpg">
<div id="home-button-5" class="image-caption">Aprés-Sinistre</div>
</div>
</div>
<div id="decontamination-d-amiante" class="span4 m-l10">
<div class="image-content">
<img src="images/home-buttons/home-button-6.jpg">
<div id="home-button-6" class="image-caption">Décontamination d'amiante</div>
</div>
</div>
</div>

It can be done using JQuery.
First, each part that should be hovered must have an onmouseover attribute that the first parameter of that should be a unique number. like this:
<div onmouseover="run_hover(1);"></div>
<div onmouseover="run_hover(2);"></div>
<div onmouseover="run_hover(3);"></div>
and each big part that will be shown should have a unique ID with a number that is the same with the parameter you entered for the div that should be hovered. Like this:
<div id="box_for_show">
<div id="div_1">Content 1</div>
<div id="div_2">Content 2</div>
<div id="div_3">Content 3</div>
</div>
and this is the JQuery code of that:
function run_hover(id) {
$("#box_for_show div").fadeOut(function(){
$("#div_"+id).fadeIn();
});
}
Point: #box_for_show div {display: none;}
Here is the fiddle that will work for you:
http://jsfiddle.net/h0puq1Ld/4/

It is not the best example but i hope it helps. You could also use list
$('div.image-caption').hover(function(){
var nums = $(this).attr('id');
$('#cont-'+nums).css('display','block');
}, function() {
$('.cont').hide();
});

Specify jQuery overlay function to one element and not open all at once

I'm doing a school project about creating a new website for this dog club called, Danish Terrier Club.
I've wanted to make a race page about all the terriers and build it up by creating hexagon pictures and give them each an overlay, so when you click on it the rest becomes darks and a box pops up with infos and more pictures about the race you've clicked on.
Got it all to work but I have this problem that the jQuery code is not specific to the one you click on. For some reason, it opens all of the overlays at the same time and they stack on each other.
Can anyone help me find out what I must change in my code?
ps.
Most of the code is found on different open sources.
/*
* overlay.js v1.0.0
* Copyright 2014 Joah Gerstenberg (www.joahg.com)
*/
(function($) {
$.fn.overlay = function() {
overlay = $('.overlay');
overlay.ready(function() {
overlay.on('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function(e) {
if (!overlay.hasClass('shown')) {
overlay.css('visibility', 'hidden');
}
});
overlay.on('show', function() {
overlay.css('visibility', 'visible');
overlay.addClass('shown');
return true;
});
overlay.on('hide', function() {
overlay.removeClass('shown');
return true;
});
overlay.on('click', function(e) {
if (e.target.className === overlay.attr('class')) {
return overlay.trigger('hide');
} else {
return false;
}
})
$('a[data-overlay-trigger]').on('click', function() {
overlay.trigger('show');
});
})
};
})(jQuery);
.outerbox {
display:flex;
align-items:center;
justify-content:center;
}
#easyOverlay{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
visibility: hidden;
top: 0;
color:#fff;
z-index: 1000;
}
#easyOverlay .closeit {
position: absolute;
right: 0px;
top: 0px;
padding: 5px;
background: #333;
color: #fff;
cursor: pointer;
z-index: 2000;
text-decoration: none;
}
#flexcolumn {
display:flex;
flex-direction:row;
}
.firstcolumn {
flex-direction:column;
margin-top:auto;
margin-bottom:auto;
}
.secondcolumn {
flex-direction:column;
margin-top:auto;
margin-bottom:auto;
}
.thirdcolumn {
flex-direction:column;
margin-top:auto;
margin-bottom:auto;
}
.fourthcolumn {
flex-direction:column;
margin-top:auto;
margin-bottom:auto;
}
.fifthcolumn {
flex-direction:column;
margin-top:auto;
margin-bottom:auto;
}
.sixthcolumn {
flex-direction:column;
margin-top:auto;
margin-bottom:auto;
}
.seventhcolumn {
flex-direction:column;
margin-top:auto;
margin-bottom:auto;
text-align:center;
}
.overlay {
visibility: hidden;
opacity: 0;
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 10;
width: 100%;
height: 100%;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.85);
cursor: pointer;
-webkit-transition: opacity 0.3s ease-in-out;
-moz-transition: opacity 0.3s ease-in-out;
-ms-transition: opacity 0.3s ease-in-out;
-o-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}
.overlay .modal {
cursor: auto;
position: absolute;
z-index: 11;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
max-width: 500px;
max-height: 300px;
padding: 20px;
background-color: rgb(255,255,255);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.overlay.shown {
opacity: 1;
}
<!doctype html>
<html>
<head>
<meta charset="iso-8859-1">
<title>DTK Hexagon</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="dist/overlay.js"></script>
<script>
$(document).ready(function() {
$('.overlay').overlay();
});
</script>
<link rel="stylesheet" href="dist/overlay.css">
<link href="stylehexagon.css" rel="stylesheet" type="text/css">
</head>
<body>
<!--
flexcolumn ID = put every column in a row beside each other
the column divs = put every picture in a column
-->
<div class="outerbox">
<div id="flexcolumn">
<div class="firstcolumn">
<div class="borderterrier">
<a data-overlay-trigger href="#!"><img src="img/borderterrier.png"></a>
<div class="overlay">
<div class="modal">
<h1>Border terrier</h1>
<p>Jeg ser ingen border :I</p>
</div>
</div>
</div>
<div class="foxterrierglathaaret">
<a data-overlay-trigger href="#!"><img src="img/sada.png"></a>
<div class="overlay">
<div class="modal">
<h1>Fox terrier glathåret</h1>
<p>den er glat håret :I</p>
</div>
</div>
</div>
</div>
<div class="secondcolumn">
<div class="airedaleterrier">
<a data-overlay-trigger href="#!"><img src="img/airedaleterrier.png"></a>
<div class="overlay">
<div class="modal">
<h1>Airedale terrier</h1>
<p>Airedale.. Dafuq :I</p>
</div>
</div>
</div>
<div class="bullterrier">
<a data-overlay-trigger href="#!"><img src="img/bullterrier.png"></a>
</div>
<div class="foxterrierruhaaret">
<a data-overlay-trigger href="#!"><img src="img/fox_terrier_ruhaaret.png"></a>
</div>
<div class="kerryblueterrier">
<a data-overlay-trigger href="#!"><img src="img/kerry_blue_terrier.png"></a>
</div>
<div class="norwichterrier">
<a data-overlay-trigger href="#!"><img src="img/norwich_terrier.png"></a>
</div>
</div>
<div class="thirdcolumn">
<div class="americanstaffordshireterrier">
<a data-overlay-trigger href="#!"><img src="img/muricanstaffordshireterrier.png"></a>
</div>
<div class="bull_terrier_miniature">
<a data-overlay-trigger href="#!"><img src="img/bull_terrier_miniature.png"></a>
</div>
<div class="irishglenofimaal">
<a data-overlay-trigger href="#!"><img src="img/irish_glen_of_imaal.png"></a>
</div>
<div class="lakelandterrier">
<a data-overlay-trigger href="#!"><img src="img/lakeland_terrier.png"></a>
</div>
<div class="parsonrussellterrier">
<a data-overlay-trigger href="#!"><img src="img/parson_russell_terrier.png"></a>
</div>
<div class="staffordshirebullterrier">
<a data-overlay-trigger href="#!"><img src="img/staffordshire_bull_terrier.png"></a>
</div>
</div>
<div class="fourthcolumn">
<div class="australskterrier">
<a data-overlay-trigger href="#!"><img src="img/australsk_terrier.png"></a>
</div>
<div class="cairn_terrier">
<a data-overlay-trigger href="#!"><img src="img/cairn_terrier.png"></a>
</div>
<div class="irishsoftcoatedwheatenterrier">
<a data-overlay-trigger href="#!"><img src="img/irish_soft_coated_wheaten_terrier.png"></a>
</div>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="sealyhamterrier">
<a data-overlay-trigger href="#!"><img src="img/sealyham_terrier.png"></a>
</div>
<div class="terrierbrasileiro">
<a data-overlay-trigger href="#!"><img src="img/terrier_brasileiro.png"></a>
</div>
<div class="westhighlandwhiteterrier">
<a data-overlay-trigger href="#!"><img src="img/west_highland_white_terrier.png"></a>
</div>
</div>
<div class="fifthcolumn">
<div class="australiansilkyterrier">
<a data-overlay-trigger href="#!"><img src="img/australian_silky_terrier.png"></a>
</div>
<div class="ceskyterrier">
<a data-overlay-trigger href="#!"><img src="img/cesky_terrier.png"></a>
</div>
<div class="irskterrier">
<a data-overlay-trigger href="#!"><img src="img/irsk_terrier.png"></a>
</div>
<div class="manchesterterrier">
<a data-overlay-trigger href="#!"><img src="img/manchester_terrier.png"></a>
</div>
<div class="skotskterrier">
<a data-overlay-trigger href="#!"><img src="img/skotsk_terrier.png"></a>
</div>
<div class="welshterrier">
<a data-overlay-trigger href="#!"><img src="img/welsh_terrier.png"></a>
</div>
</div>
<div class="sixthcolumn">
<div class="bedlingtonterrier">
<a data-overlay-trigger href="#!"><img src="img/bedlington_terrier.png"></a>
</div>
<div class="dandiedinmontterrier">
<a data-overlay-trigger href="#!"><img src="img/dandie_dinmont_terrier.png"></a>
</div>
<div class="jackrussellterrier">
<a data-overlay-trigger href="#!"><img src="img/jack_russell_terrier.png"></a>
</div>
<div class="norfolkterrier">
<a data-overlay-trigger href="#!"><img src="img/norfolk_terrier.png"></a>
</div>
<div class="skyeterrier">
<a data-overlay-trigger href="#!"><img src="img/skye_terrier.png"></a>
</div>
</div>
<div class="seventhcolumn">
<div class="engelsktoyterrier">
<a data-overlay-trigger href="#!"><img src="img/engelsk_toy_terrier.png"></a>
</div>
<div class="japanskterrier">
<a data-overlay-trigger href="#!"><img src="img/japansk_terrier.png"></a>
</div>
</div>
</div>
</div>
</body>
</html>

When I built the overlay.js script, I didn't account for multiple overlays on one page. I've updated it now to account for this, and you can get the new, updated script here: https://github.com/JoahG/overlay.js/blob/gh-pages/dist/overlay.js
Now, you can specify which overlay you want your links to trigger by using ID's on your overlays. For example:
<a data-overlay-trigger="airdale" href="#!"><img src="img/airedaleterrier.png"></a>
<!-- added ="airdale" to specify the ID of the appropriate modal -->
<div class="overlay" id="airdale"> <!-- add ID to modal -->
<div class="modal">
<h1>Airedale terrier</h1>
<p>Airedale.. Dafuq :I</p>
</div>
</div>
Hope that helps!

Refresh content jQuery

I'm working on a little project, and I'm making a content show with radio buttons, something like a slideshow gallery, but what i'm trying to do is a big container with many divs inside with a opacity:1; all this overlapping 3 containers more with the same characteristics, so when somebody give a clic in a radio button, the container with opacity:1; will get a opacity:0; and the overlapped container by the container with opacity:1; will be visible.
the main problem that I get is when I clic in a radio button to change the content, this (content) doesn't appears until I reload the page, can somebody tell me why this happen? and how to solve it?
Thanks!
$(document).ready(function(){
$("#op1").prop('checked',true);
$("#op2").prop('checked',true);
$("#op3").prop('checked',true);
$("#op4").prop('checked',true);
//$("#x").prop('checked',false);
if ($("#op1").is(':checked')) {
if ($('#cont1').hasClass('contenedor-fotos-opacity'))
{
$('#cont1').removeClass('contenedor-fotos-opacity').addClass('contenedor-fotos1');
}
$('.contenedor-fotos2').removeClass('contenedor-fotos2').addClass('contenedor-fotos-opacity');
$('.contenedor-fotos3').removeClass('contenedor-fotos3').addClass('contenedor-fotos-opacity');
$('.contenedor-fotos4').removeClass('contenedor-fotos4').addClass('contenedor-fotos-opacity');
}
if ($("#op2").is(':checked')) {
if ($('#cont2').hasClass('contenedor-fotos-opacity'))
{
$('#cont2').removeClass('contenedor-fotos-opacity').addClass('contenedor-fotos2');
}
$('.contenedor-fotos1').removeClass('contenedor-fotos1').addClass('contenedor-fotos-opacity');
$('.contenedor-fotos3').removeClass('contenedor-fotos3').addClass('contenedor-fotos-opacity');
$('.contenedor-fotos4').removeClass('contenedor-fotos4').addClass('contenedor-fotos-opacity');
}
if ($("#op3").is(':checked')) {
if ($('#cont3').hasClass('contenedor-fotos-opacity'))
{
$('#cont3').removeClass('contenedor-fotos-opacity').addClass('contenedor-fotos3');
}
$('.contenedor-fotos1').removeClass('contenedor-fotos1').addClass('contenedor-fotos-opacity');
$('.contenedor-fotos2').removeClass('contenedor-fotos2').addClass('contenedor-fotos-opacity');
$('.contenedor-fotos4').removeClass('contenedor-fotos4').addClass('contenedor-fotos-opacity');
}
if ($("#op4").is(':checked')) {
if ($('#cont4').hasClass('contenedor-fotos-opacity'))
{
$('#cont4').removeClass('contenedor-fotos-opacity').addClass('contenedor-fotos4');
}
$('.contenedor-fotos1').removeClass('contenedor-fotos1').addClass('contenedor-fotos-opacity');
$('.contenedor-fotos2').removeClass('contenedor-fotos2').addClass('contenedor-fotos-opacity');
$('.contenedor-fotos3').removeClass('contenedor-fotos3').addClass('contenedor-fotos-opacity');
}
});
#contenedor-portafolio {
position: relative;
width: 100%;
background: #222;
}
.fotos-portolio {
width: 300px;
height: 300px;
display: inline-block;
margin-left: 15px;
margin-top: 15px;
overflow: hidden;
background: #444;
}
.contenedor-fotos1 {
width: 90%;
position: absolute;
margin-left: 5%;
background: red;
z-index: 10;
}
.contenedor-fotos-opacity {
width: 90%;
position: absolute;
margin-left: 5%;
opacity:0;
z-index: 10;
}
.contenedor-fotos2 {
width: 90%;
position: absolute;
margin-left: 5%;
background: green;
z-index: 11;
}
.contenedor-fotos3 {
width: 90%;
position: absolute;
margin-left: 5%;
background: blue;
z-index: 12;
}
.contenedor-fotos4 {
width: 90%;
position: absolute;
margin-left: 5%;
background: yellow;
z-index: 13;
}
<!DOCTYPE html>
<html>
<head>
<title>prueba cont-slider</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css/content-slider.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/content-slider.js"></script>
</head>
<body style="width:100%; position:absolute; top: 0px; left: -8px;">
<div id="contenedor-portafolio">
<form>
<input type="radio" name="opacitylayer" id="op1"/>
<label for="op1">DISEÑO WEB</label>
<input type="radio" name="opacitylayer" id="op2"/>
<label for="op2">DISEÑO GRÁFICO</label>
<input type="radio" name="opacitylayer" id="op3"/>
<label for="op3">DISEÑO 3D</label>
<input type="radio" name="opacitylayer" id="op4"/>
<label for="op4">FOTOGRAFÍA</label>
</form>
<div id="cont1" class="contenedor-fotos1">
<center>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
</center>
</div>
<div id="cont2" class="contenedor-fotos2">
<center>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
</center>
</div>
<div id="cont3" class="contenedor-fotos3">
<center>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
</center>
</div>
<div id="cont4" class="contenedor-fotos4">
<center>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
</center>
</div>
</div>
</body>
</html>

You need to use a change handler since you want to run the script whenever user changes the checked status of the radio elements
$(document).ready(function(){
$("#op2").prop('checked',true);
$("#op1, #op2, #op3, #op4").on('change', function(){
if ($("#op1").is(':checked')) {
if ($('#cont1').hasClass('contenedor-fotos-opacity'))
{
$('#cont1').removeClass('contenedor-fotos-opacity').addClass('contenedor-fotos1');
}
$('.contenedor-fotos2').removeClass('contenedor-fotos2').addClass('contenedor-fotos-opacity');
$('.contenedor-fotos3').removeClass('contenedor-fotos3').addClass('contenedor-fotos-opacity');
$('.contenedor-fotos4').removeClass('contenedor-fotos4').addClass('contenedor-fotos-opacity');
}
if ($("#op2").is(':checked')) {
if ($('#cont2').hasClass('contenedor-fotos-opacity'))
{
$('#cont2').removeClass('contenedor-fotos-opacity').addClass('contenedor-fotos2');
}
$('.contenedor-fotos1').removeClass('contenedor-fotos1').addClass('contenedor-fotos-opacity');
$('.contenedor-fotos3').removeClass('contenedor-fotos3').addClass('contenedor-fotos-opacity');
$('.contenedor-fotos4').removeClass('contenedor-fotos4').addClass('contenedor-fotos-opacity');
}
if ($("#op3").is(':checked')) {
if ($('#cont3').hasClass('contenedor-fotos-opacity'))
{
$('#cont3').removeClass('contenedor-fotos-opacity').addClass('contenedor-fotos3');
}
$('.contenedor-fotos1').removeClass('contenedor-fotos1').addClass('contenedor-fotos-opacity');
$('.contenedor-fotos2').removeClass('contenedor-fotos2').addClass('contenedor-fotos-opacity');
$('.contenedor-fotos4').removeClass('contenedor-fotos4').addClass('contenedor-fotos-opacity');
}
if ($("#op4").is(':checked')) {
if ($('#cont4').hasClass('contenedor-fotos-opacity'))
{
$('#cont4').removeClass('contenedor-fotos-opacity').addClass('contenedor-fotos4');
}
$('.contenedor-fotos1').removeClass('contenedor-fotos1').addClass('contenedor-fotos-opacity');
$('.contenedor-fotos2').removeClass('contenedor-fotos2').addClass('contenedor-fotos-opacity');
$('.contenedor-fotos3').removeClass('contenedor-fotos3').addClass('contenedor-fotos-opacity');
}
}).change()
});
#contenedor-portafolio {
position: relative;
width: 100%;
background: #222;
}
.fotos-portolio {
width: 300px;
height: 300px;
display: inline-block;
margin-left: 15px;
margin-top: 15px;
overflow: hidden;
background: #444;
}
.contenedor-fotos1 {
width: 90%;
position: absolute;
margin-left: 5%;
background: red;
z-index: 10;
}
.contenedor-fotos-opacity {
width: 90%;
position: absolute;
margin-left: 5%;
opacity:0;
z-index: 10;
}
.contenedor-fotos2 {
width: 90%;
position: absolute;
margin-left: 5%;
background: green;
z-index: 11;
}
.contenedor-fotos3 {
width: 90%;
position: absolute;
margin-left: 5%;
background: blue;
z-index: 12;
}
.contenedor-fotos4 {
width: 90%;
position: absolute;
margin-left: 5%;
background: yellow;
z-index: 13;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<title>prueba cont-slider</title>
<meta charset="utf-8"/>
<link rel="stylesheet" type="text/css" href="css/content-slider.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="js/content-slider.js"></script>
</head>
<body style="width:100%; position:absolute; top: 0px; left: -8px;">
<div id="contenedor-portafolio">
<form>
<input type="radio" name="opacitylayer" id="op1"/>
<label for="op1">DISEÑO WEB</label>
<input type="radio" name="opacitylayer" id="op2"/>
<label for="op2">DISEÑO GRÁFICO</label>
<input type="radio" name="opacitylayer" id="op3"/>
<label for="op3">DISEÑO 3D</label>
<input type="radio" name="opacitylayer" id="op4"/>
<label for="op4">FOTOGRAFÍA</label>
</form>
<div id="cont1" class="contenedor-fotos1">
<center>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
</center>
</div>
<div id="cont2" class="contenedor-fotos2">
<center>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
</center>
</div>
<div id="cont3" class="contenedor-fotos3">
<center>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
</center>
</div>
<div id="cont4" class="contenedor-fotos4">
<center>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
<div class="fotos-portolio"></div>
</center>
</div>
</div>
</body>
</html>
You can simplify that to
$(document).ready(function () {
$("#op2").prop('checked', true);
var $els = $('#cont1, #cont2, #cont3, #cont4');
$("#op1, #op2, #op3, #op4").on('change', function () {
var id = this.id.substring(2), $el = $('#cont'+id);
if (this.checked) {
if ($el.hasClass('contenedor-fotos-opacity')) {
$el.removeClass('contenedor-fotos-opacity').addClass('contenedor-fotos'+id);
}
$els.not($el).each(function(){
$(this).removeClass('contenedor-fotos'+this.id.substring(5))
}).addClass('contenedor-fotos-opacity')
}
}).change()
});
Demo: Fiddle

Categories