Whenever I click on "click hier" the div with class "cirkel1" and the div with class "bewegendetekst" show up. But when I want to click "click back" they won't disappear.
I tried to use the toggle function but that only made things worse.
So my question is how do I make the div with class "cirkel1" and the div with class "bewegendetekst" disappear when I click on "click back"
$(document).ready(function() {
$(".blok1").click(function() {
$(".blok2").toggle("slow");
$(".blok3").toggle("slow");
$(".blok4").toggle("slow");
});
$(".blok1").click(function() {
if ($(this).width() != 500)
$(this).animate({
width: 500
}, 1000);
else
$(this).animate({
width: 250
}, 1000);
});
$(".blok1").click(function() {
if ($(this).height() != 500)
$(this).animate({
height: 500
}, 1000);
else
$(this).animate({
height: 250
}, 1000);
});
});
$(document).ready(function() {
$("p").on("click", function() {
var el = $(this);
setTimeout(function() {
if (el.text() == el.data("text-swap")) {
el.text(el.data("text-original"));
} else {
el.data("text-original", el.text());
el.text(el.data("text-swap"));
}
}, 1000);
});
});
$(document).ready(function() {
$(".cirkel1").click(function() {
$(".bewegendetekst").show("slow");
});
});
$(document).ready(function() {
$(".witte-tekst").click(function() {
$(".cirkel1").show("slow");
});
$(".cirkel1").click(function(e) {
e.stopPropagation();
$(".cirkel1").hide("slow");
});
});
.rij1 {
display: flex;
width: 500px;
}
.rij2 {
display: flex;
width: 500px;
}
.blok1 {
background-color: cadetblue;
height: 250px;
width: 250px;
}
.blok2 {
background-color: palevioletred;
height: 250px;
width: 250px;
}
.blok3 {
background-color: darkseagreen;
height: 250px;
width: 250px;
}
.blok4 {
background-color: coral;
height: 250px;
width: 250px;
}
.witte-tekst {
color: #fff;
}
.cirkel1 {
border-radius: 50%;
background-color: #000;
height: 125px;
width: 125px;
position: absolute;
}
.bewegendetekst {
color: #fff;
height: 125px;
width: 250px;
background-color: #000;
padding: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class='rij1'>
<div class='blok1'>
<p class='witte-tekst' data-text-swap="Click Back">Click hier</p>
<div class='cirkel1' style="display:none"></div>
<p class='bewegendetekst' style="display:none">Met Jquery is het ook mogelijk om verschillende animaties toetepassen kijk maar naar deze cirkel</p>
</div>
<div class='blok2'></div>
</div>
<div class='rij2'>
<div class='blok3'></div>
<div class='blok4'></div>
</div>
Use jQuery toggle() method to show/hide circle when you click Click Back button :
$(".witte-tekst").click(function() {
$(".cirkel1").toggle("slow");
})
NOTE : One ready function is enough.
Hope this helps.
$(document).ready(function() {
$(".blok1").click(function() {
$(".blok2").toggle("slow");
$(".blok3").toggle("slow");
$(".blok4").toggle("slow");
});
$(".blok1").click(function() {
if ($(this).width() != 500)
$(this).animate({
width: 500
}, 1000);
else
$(this).animate({
width: 250
}, 1000);
});
$(".blok1").click(function() {
if ($(this).height() != 500)
$(this).animate({
height: 500
}, 1000);
else
$(this).animate({
height: 250
}, 1000);
});
$("p").on("click", function() {
var el = $(this);
setTimeout(function() {
if (el.text() == el.data("text-swap")) {
el.text(el.data("text-original"));
} else {
el.data("text-original", el.text());
el.text(el.data("text-swap"));
}
}, 1000);
});
$(".cirkel1").click(function() {
$(".bewegendetekst").show("slow");
});
$(".witte-tekst").click(function() {
$(".cirkel1").toggle("slow");
});
$(".cirkel1").click(function(e) {
e.stopPropagation();
$(".cirkel1").hide("slow");
});
});
.rij1 {
display: flex;
width: 500px;
}
.rij2 {
display: flex;
width: 500px;
}
.blok1 {
background-color: cadetblue;
height: 250px;
width: 250px;
}
.blok2 {
background-color: palevioletred;
height: 250px;
width: 250px;
}
.blok3 {
background-color: darkseagreen;
height: 250px;
width: 250px;
}
.blok4 {
background-color: coral;
height: 250px;
width: 250px;
}
.witte-tekst {
color: #fff;
}
.cirkel1 {
border-radius: 50%;
background-color: #000;
height: 125px;
width: 125px;
position: absolute;
}
.bewegendetekst {
color: #fff;
height: 125px;
width: 250px;
background-color: #000;
padding: 30px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class='rij1'>
<div class='blok1'>
<p class='witte-tekst' data-text-swap="Click Back">Click hier</p>
<div class='cirkel1' style="display:none"></div>
<p class='bewegendetekst' style="display:none">Met Jquery is het ook mogelijk om verschillende animaties toetepassen kijk maar naar deze cirkel</p>
</div>
<div class='blok2'></div>
</div>
<div class='rij2'>
<div class='blok3'></div>
<div class='blok4'></div>
</div>
hide() function is use to hide like
$('#yourdiv').hide();
Its will hide back again to click
$(".witte-tekst").click(function() {
$(".cirkel1").toggle( "slow" );
});
Related
I want to hide the hidden class div. When user will click on the outside of the div hidden
div should be slide-out.
HTML
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div class="hidden">Here I am !</div>
<div class="left">Left panel</div>
<div class="right">Right panel</div>
<div class="clear"></div>
Show/hide Slide Panel
</body>
</html>
CSS
.left,
.hidden {
float: left;
height: 350px;
}
.left {
width: 50%;
background: #fff;
z-index: 1;
}
.hidden {
width: 25%;
z-index: 2;
position: absolute;
left: -1000px;
background: #f90;
color: #000;
}
.right {
width: 50%;
float: right;
height: 350px;
background: #000;
color: #fff;
}
.clear {
clear: both;
}
JS
$(document).ready(function () {
$('#slide').click(function () {
var hidden = $('.hidden');
if (hidden.hasClass('visible')) {
hidden.animate({
"left": "-1000px"
}, "slow").removeClass('visible');
} else {
hidden.animate({
"left": "0px"
}, "slow").addClass('visible');
}
});
});
Thanks in advance!
You can you this code. And you can define which elements of your page could hide your panel. I choose left, right and clear classes here:
$(document).ready(function () {
$('#slide').click(function () {
hide_el ();
});
$('.left, .right, .clear').click(()=>{
var hidden = $('.hidden');
if (hidden.hasClass('visible')) {
hidden.animate({
"left": "-1000px"
}, "slow").removeClass('visible');
}
});
});
function hide_el (){
var hidden = $('.hidden');
if (hidden.hasClass('visible')) {
hidden.animate({
"left": "-1000px"
}, "slow").removeClass('visible');
} else {
hidden.animate({
"left": "0px"
}, "slow").addClass('visible');
}
}
.left,
.hidden {
float: left;
height: 350px;
}
.left {
width: 50%;
background: #fff;
z-index: 1;
}
.hidden {
width: 25%;
z-index: 2;
position: absolute;
left: -1000px;
background: #f90;
color: #000;
}
.right {
width: 50%;
float: right;
height: 350px;
background: #000;
color: #fff;
}
.clear {
clear: both;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div class="hidden">Here I am !</div>
<div class="left">Left panel</div>
<div class="right">Right panel</div>
<div class="clear"></div>
Show/hide Slide Panel
</body>
</html>
If you need body click then use this code:
$(document).ready(function () {
$('#slide').click(function () {
hide_el ();
});
});
function body_click(){
setTimeout(()=>{
var hidden = $('.hidden');
$('body').click( function(event) {
if( $(event.target).closest(hidden).length === 0 ) {
if (hidden.hasClass('visible')) {
hidden.animate({
"left": "-1000px"
}, "slow").removeClass('visible');
};
}
});
}, 1000);
}
function hide_el (){
$('body').unbind('click');
var hidden = $('.hidden');
if (hidden.hasClass('visible')) {
hidden.animate({
"left": "-1000px"
}, "slow").removeClass('visible');
} else {
hidden.animate({
"left": "0px"
}, "slow").addClass('visible');
body_click();
}
}
body {
height: 300px;
}
.left,
.hidden {
float: left;
height: 350px;
}
.left {
width: 50%;
background: #fff;
z-index: 1;
}
.hidden {
width: 25%;
z-index: 2;
position: absolute;
left: -1000px;
background: #f90;
color: #000;
}
.right {
width: 50%;
float: right;
height: 350px;
background: #000;
color: #fff;
}
.clear {
clear: both;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div class="hidden">Here I am !</div>
<div class="left">Left panel</div>
<div class="right">Right panel</div>
<div class="clear"></div>
Show/hide Slide Panel
</body>
</html>
The following code checks if you're clicking inside the target element of a descendent of that element. If not the desired code will run. I didn't add in the animation bits, that's all you. Here's the fiddle https://jsfiddle.net/jhe36dmb/1/
$(document).mouseup(function (e)
{
var container = $('.hidden');
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
$('.hidden').css('left', '0');
}
});
I have made a page which has a transperant header and a logo in white color.
But when i scroll down my logo isn't visible because of white body color. I want to add black logo when i scroll down. How to do it ?
This is my code. :
$(window).on('scroll', function () {
if ($(this).scrollTop()) {
$('.navbar').addClass("shrink");
//$('.navbar-brand img').attr('src', 'images/logo.png');
}else{
$('.navbar').removeClass("shrink");
//$('.navbar-brand img').attr('src', 'images/logo.png');
}
});
but its not working
You need to add scroll amount. Replace your code with this one.
$(window).on('scroll', function () {
if ($(this).scrollTop() > 70) { // Set position from top
$('.navbar').addClass("shrink");
//$('.navbar-brand img').attr('src', 'images/logo.png');
}else{
$('.navbar').removeClass("shrink");
//$('.navbar-brand img').attr('src', 'images/logo.png');
}
});
Hope It works. Thanks !
Try This:
$(window).scroll(function(){
if($(this).scrollTop()>70) {
$('#header img').attr('src','https://upload.wikimedia.org/wikipedia/commons/thumb/f/fa/Apple_logo_black.svg/600px-Apple_logo_black.svg.png');
}
else {
$('#header img').attr('src','https://www.seeklogo.net/wp-content/uploads/2012/12/apple-logo-eps-logo-vector-400x400.png');
}
})
body {
height: 1500px;
}
#header {
height: 70px;
background-color: #ccc;
position: fixed;
width: 100%;
left: 0;
top: 0;
}
#header img {
width: 50px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="header">
<img src="https://www.seeklogo.net/wp-content/uploads/2012/12/apple-logo-eps-logo-vector-400x400.png">
</div>
Take a look on this, it will help you.
$(function() { var logo = $(".lrg-logo"); $(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 500) {
if(!logo.hasClass("sml-logo")) {
logo.hide();
logo.removeClass('lrg-logo').addClass("sml-logo").fadeIn( "slow");
}
} else {
if(!logo.hasClass("lrg-logo")) {
logo.hide();
logo.removeClass("sml-logo").addClass('lrg-logo').fadeIn( "slow");
}
}
});
});
.wrapper {
height: 2000px;
position: relative;
background: green;
}
header {
position: fixed;
width: 100%;
height: 50px;
background: grey;
}
.lrg-logo {
width: 300px;
height: 50px;
text-align: center;
background: red;
}
.sml-logo {
width: 200px;
height: 20px;
text-align: center;
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
<header>
<div class="lrg-logo">Logo</div>
</header>
</div>
scrollTop will return a value while this line if ($(this).scrollTop()) will look for a boolean value.
So test the value in the loop condition
if ($(this).scrollTop()===someNumber) {
//rest of code
}
The variable "abtBack" contains an if statement that when ran after the xBttn click function should allow the word "About" on the screen move back to its original position. For some reason when I try to run the variables nothig different happens from when I didn't try to run them. I left out what parts of the code I feel are not important to solve this problem. Please refer to my full code in the Fiddle below.
JSFiddle
<div id='bckDrp'>
<div id='nav'>
<img src='https://cdn2.iconfinder.com/data/icons/media-and-navigation-buttons-round/512/Button_12-128.png' id='xBttn'>
<ul id='navLst'>
<li class='navOp' id='hme'>Home</li>
<li class='navOp' id='abt'>About</li>
<li class='navOp' id='prt'>Portfolio</li>
</ul>
</div>
</div>
var abtBack = function() {
if ($('#abt').offset().left == (abtLeft - 210)) {
$(this).animate({
left: "+=210"
}, 450);
}
}
var main = function() {
//When any tab is clicked
$('#hme, #abt, #prt').click(function() {
$('#xBttn').toggle(300);
$('#xBttn').click(function() {
$('#xBttn').fadeOut(300);
$('#hme, #abt, #prt').animate({
opacity: 1
}, 300);
abtBack();
})
})
var abtLeft = $('#abt').offset().left;
//When About tab is clicked
$('#abt').click(function() {
if ($('#hme, #prt').css('opacity') == 0) {
$('#hme, #prt').animate({
opacity: 1
}, 300);
} else {
$('#hme, #prt').animate({
opacity: 0
}, 300);
}
}
The variable abtLeft is local to the main function, so it can't be accessed in the abtBack function. Either move the declaration of this variable outside both functions, or put the defintion of abtBack inside main.
Another problem is that this is not set to the element you want to animate in the abtBack and prtBack functions, so $(this).animate() won't work. Use $('#prt').animate() and $('#abt').animate().
var main = function() {
var prtBack = function() {
if ($('#prt').offset().left == (prtLeft - 430)) {
$('#prt').animate({
left: "+=430"
}, 450);
} else {
$('#prt').animate({
left: "-=430"
}, 450);
}
}
var abtBack = function() {
if ($('#abt').offset().left == (abtLeft - 210)) {
$('#abt').animate({
left: "+=210"
}, 450);
}
}
//When any tab is clicked
$('#hme, #abt, #prt').click(function() {
$('#xBttn').toggle(300);
$('#xBttn').click(function() {
$('#xBttn').fadeOut(300);
$('#hme, #abt, #prt').animate({
opacity: 1
}, 300);
abtBack();
prtBack();
})
})
//When Home tab is clicked
$('#hme').click(function() {
if ($('#abt, #prt').css('opacity') == 0) {
$('#abt, #prt').animate({
opacity: 1
}, 300);
} else {
$('#abt, #prt').animate({
opacity: 0
}, 300);
}
});
var abtLeft = $('#abt').offset().left;
//When About tab is clicked
$('#abt').click(function() {
if ($('#hme, #prt').css('opacity') == 0) {
$('#hme, #prt').animate({
opacity: 1
}, 300);
} else {
$('#hme, #prt').animate({
opacity: 0
}, 300);
}
if ($('#abt').offset().left == (abtLeft - 210)) {
$(this).animate({
left: "+=210"
}, 450);
} else {
$(this).animate({
left: "-=210"
}, 450);
}
});
var prtLeft = $('#prt').offset().left;
//When About tab is clicked
$('#prt').click(function() {
if ($('#hme, #abt').css('opacity') == 0) {
$('#hme, #abt').animate({
opacity: 1
}, 300);
} else {
$('#hme, #abt').animate({
opacity: 0
}, 300);
}
if ($('#prt').offset().left == (prtLeft - 430)) {
$(this).animate({
left: "+=430"
}, 450);
} else {
$(this).animate({
left: "-=430"
}, 450);
}
});
}
$(document).ready(main);
body {
background: url('http://silviahartmann.com/background-tile-art/images/grey-repeating-background-8.jpg');
}
.mvLeft {
right: 215px;
}
#bckDrp {
left: 50%;
transform: translate(-50%, 0);
position: fixed;
width: 85%;
height: 100%;
background: url('http://blog.spoongraphics.co.uk/wp-content/uploads/2012/textures/18.jpg');
}
#nav {
background: rgba(0, 0, 0, 0.20);
}
.padExt {
width: 100%;
height: 100%;
padding: 10px;
}
#nwsArea {
height: 65%;
width: 40%;
background-color: grey;
-webkit-transition: transform 1s, box-shadow 1s;
border: 2px solid silver;
box-shadow: 0 0 15px #777;
}
#nwsArea:hover {
transform: skewY(3deg);
box-shadow: -5px 15px 10px #777;
}
#nwsTtl {
height: 100px;
width: 100%;
background-color: white;
border-radius: 5px;
text-align: center;
border: 2px solid black;
}
#nwsTtl:hover {
background-color: #E3E3E3;
}
#nwsTxt {
font-family: 'Roboto Condensed', sans-serif;
font-size: 40px;
}
#ruschin {
height: 90%;
width: 90%;
padding: 5%;
}
#xBttn {
height: 20px;
padding: 8px;
position: absolute;
display: none;
}
#navLst {
margin: 0 auto;
text-align: center;
}
li {
list-style-type: none;
display: inline-block;
-webkit-transition: color .5s;
}
li:hover {
color: #2B2B2B;
}
.navOp {
padding: 50px;
font-size: 40px;
font-family: 'Droid Sans', sans-serif;
}
#abt,
#prt {
position: relative;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id='bckDrp'>
<div id='nav'>
<img src='https://cdn2.iconfinder.com/data/icons/media-and-navigation-buttons-round/512/Button_12-128.png' id='xBttn'>
<ul id='navLst'>
<li class='navOp' id='hme'>Home</li>
<li class='navOp' id='abt'>About</li>
<li class='navOp' id='prt'>Portfolio</li>
</ul>
</div>
<div class='padExt'>
<div id='nwsArea'>
<img src='https://www.scmp.com/sites/default/files/2014/05/20/tpbje20140520272_43042097.jpg' id='ruschin'>
<div id='nwsTtl'>
<h3 id='nwsTxt'>Russia and China begin joint military drill</h3>
</div>
</div>
</div>
</div>
This code fades out an image on load after a delay. Is it possible to fade in a new image after the blue circle fades out? http://jsfiddle.net/gabrieleromanato/8puvn/
html
<div id="test"></div>
Javascript
(function($) {
$.fn.fadeDelay = function(delay) {
var that = $(this);
delay = delay || 3000;
return that.each(function() {
$(that).queue(function() {
setTimeout(function() {
$(that).dequeue();
}, delay);
});
$(that).fadeOut('slow');
});
};
})(jQuery);
$('#test').fadeDelay(4000);
CSS
#test {
margin: 2em auto;
width: 10em;
height: 10em;
background: #069;
border-radius: 50%;
}
do your fade in code inside fadeOut call back.
$(that).fadeOut('slow', function(){
//do fade in
});
sample
(function($) {
$.fn.fadeDelay = function(delay, awake) {
$(awake).hide();
var that = $(this);
delay = delay || 3000;
return that.each(function() {
$(that).queue(function() {
setTimeout(function() {
$(that).dequeue();
}, delay);
});
$(that).fadeOut('slow', function() {
$(awake).fadeIn('slow');
});
});
};
})(jQuery);
$('#test').fadeDelay(4000, "#test2"); //pass jquery selector, which element to show
.circle {
margin: 2em auto;
width: 10em;
height: 10em;
border-radius: 50%;
}
#test {
background: #069;
}
#test2 {
background: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="test" class="circle"></div>
<div id="test2" class="circle"></div>
Ofcourse it's possible, in jQuery animations second parameter is the function that runs after animation completes. More info
(function($) {
$.fn.fadeDelay = function(delay) {
var that = $(this);
delay = delay || 3000;
return that.each(function() {
$(that).queue(function() {
setTimeout(function() {
$(that).dequeue();
}, delay);
});
$(that).fadeOut('slow',function(){
$('#test2').fadeIn('slow');
});
});
};
})(jQuery);
$('#test').fadeDelay(4000);
#test {
margin: 2em auto;
width: 10em;
height: 10em;
background: #069;
border-radius: 50%;
}
#test2 {
margin: 2em auto;
width: 10em;
height: 10em;
background: #f69;
border-radius: 50%;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="test"></div>
<div id="test2"></div>
Here's jsFiddle
I have this infobox that will slide to show on hover on a arrow connected to that infobox. See the jsfiddle I've linked further down for more insight.
The thing I'm struggling with is that it's sort of laggy. It jumps back and forth really fast as it likes and it bothers me a lot. I've done some research and found out that the .stop(true, false) is the thing messing it up, but that you can't really go without it either. Haven't found any smooth solution yet though...
I would like it, if possible, to...
...when hovered, fully animate the animation even though the mouse leaves.
...animate when #infoboxArrow is hovered and then animate back when the mouse leaves its parent #infocontainer.
$('#infoboxArrow').hover(function() {
$('#infocontainer')
.stop(true, false)
.animate({
right: 250
}, 600);
}, function() {
$('#infocontainer')
.stop(true, false)
.animate({
right: 0
}, 600);
});
#infocontainer{
position:fixed;
background-color: blue;
top: 0em;
right: 0em;
}
#infoboxArrow {
display: inline-block;
background-color: pink;
margin-bottom: 10.1325em;
margin-top: 10.1325em;
height: 7.735em;
}
#infoboxDiv{
display: inline-block;
background-color: yellow;
width: 400px;
height: 28em;
position: absolute;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="infocontainer" class="slideOutTab">
<div id ="infoboxArrow" class="slideOutTab"><img src="http://i61.tinypic.com/qmx8ns.png"/></div>
<div id="infoboxDiv" class="slideOutTab"></div>
</div>
Try listening to mouseenter and mouseleave events instead of hover:
var $infocontainer = $('#infocontainer');
$('#infoboxArrow').on('mouseenter', function() {
$infocontainer
.stop(true, false)
.animate({
right: 250
}, 600);
});
$infocontainer.on('mouseleave', function() {
$infocontainer
.stop(true, false)
.animate({
right: 0
}, 600);
});
var $infocontainer = $('#infocontainer');
$('#infoboxArrow').on('mouseenter', function() {
$infocontainer
.stop(true, false)
.animate({
right: 250
}, 600);
});
$infocontainer.on('mouseleave', function() {
$infocontainer
.stop(true, false)
.animate({
right: 0
}, 600);
});
#infocontainer{
position:fixed;
background-color: blue;
top: 0em;
right: 0em;
}
#infoboxArrow {
display: inline-block;
background-color: pink;
margin-bottom: 10.1325em;
margin-top: 10.1325em;
height: 7.735em;
}
#infoboxDiv{
display: inline-block;
background-color: yellow;
width: 400px;
height: 28em;
position: absolute;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="infocontainer" class="slideOutTab">
<div id ="infoboxArrow" class="slideOutTab"><img src="http://i61.tinypic.com/qmx8ns.png"/></div>
<div id="infoboxDiv" class="slideOutTab"></div>
</div>
Also note you don't need the image. And you are mixing em units with px, so your layout could break if the font size changes. Consider this code:
var $infocontainer = $('#infocontainer');
$('#infoboxArrow').on('mouseenter', function() {
$infocontainer
.stop(true, false)
.animate({
right: 250
}, 600);
});
$infocontainer.on('mouseleave', function() {
$infocontainer
.stop(true, false)
.animate({
right: 0
}, 600);
});
#infocontainer{
position: fixed;
height: 28em;
background-color: blue;
top: 0em;
right: 0em;
}
#infoboxArrow {
display: inline-block;
background-color: pink;
position: relative;
top: 50%;
margin-top: -59px;
border: 59px solid #FFC0CB;
border-right: 100px solid #000000;
border-left: none;
}
#infoboxDiv{
display: inline-block;
background-color: yellow;
width: 400px;
height: 100%;
position: absolute;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="infocontainer" class="slideOutTab">
<div id="infoboxArrow" class="slideOutTab"></div>
<div id="infoboxDiv" class="slideOutTab"></div>
</div>