<body>
<style>
.right {
display: block;
width: 90px;
height: 90px;
background-color: lightpink;
}
#news {
display: block;
width: 60px;
height: 40px;
border: 0 solid coral;
}
</style>
<div class="right"></div>
<button id="news">click</button>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
var
$button = $('#news'),
$elem = $('.right');
$button.on('click', function(e) {
$(this).animate({
borderWidth: '10px'
}, {
duration: 350,
esing: 'linear',
complete: function() {
$(this).animate({
borderWidth: '0'
});
}
});
$elem.css('box-shadow', 'inset 15px 0px 8px -10px rgba(163, 163, 163, 0.7)')
.animate({
marginLeft:"60%"
},{
duration: 350,
easing: 'swing',
complete: function() {
$(this).css('box-shadow', 'none')
.animate({
marginLeft: '0'
});
}
});
});
</script>
</body>