#1 - Change CSS with help of jQuery, and .animate movement of HTML element h1
In this example here, when button is clicked, the h1 heading gets CSS styles added through jQuery, resized its div size, and then it flies away from the webpage using jQuery .animate, try it.
HTML part :
<body>
<main>
<div class="container">
<h1>Fruitcake caramels</h1>
<p>Fruitcake caramels pudding topping toffee cheesecake cake. I love I love cupcake brownie. Wafer lemon drops tart marzipan jelly beans. Fruitcake caramels powder. I love dessert biscuit I love caramels jelly beans candy canes cake. I love toffee ice cream bear claw bear claw biscuit I love gummies sweet.</p>
<button class="btn_fruitcake right">Click</button>
</div>
</main>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/script.js"></script>
</body>
<main>
<div class="container">
<h1>Fruitcake caramels</h1>
<p>Fruitcake caramels pudding topping toffee cheesecake cake. I love I love cupcake brownie. Wafer lemon drops tart marzipan jelly beans. Fruitcake caramels powder. I love dessert biscuit I love caramels jelly beans candy canes cake. I love toffee ice cream bear claw bear claw biscuit I love gummies sweet.</p>
<button class="btn_fruitcake right">Click</button>
</div>
</main>
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/script.js"></script>
</body>
CSS part :
h1 {
position: relative;
z-index: 10;
}
position: relative;
z-index: 10;
}
jQuery part :
(function($) {
var styles = {
background: '#9b59b6',
color: '#FFF',
borderRadius: '4px',
padding: '16px'
}
var h1 = $('h1');
var webHeight = $(window).height();
$('.btn_fruitcake').click(function() {
h1.animate({ width: 480 });
h1.css(styles);
h1.animate({top: webHeight}, 1000).fadeOut(100);
});
})(jQuery);
var styles = {
background: '#9b59b6',
color: '#FFF',
borderRadius: '4px',
padding: '16px'
}
var h1 = $('h1');
var webHeight = $(window).height();
$('.btn_fruitcake').click(function() {
h1.animate({ width: 480 });
h1.css(styles);
h1.animate({top: webHeight}, 1000).fadeOut(100);
});
})(jQuery);