Trying my best to explain this, so please bear with me.
On a page, I start with a heading and paragraph tag, followed by a series of images that represent my portfolio.
Each image serves as a link that, when clicked, triggers an AJAX call to dynamically load content below the image on the page.
When a user clicks on the title of an image, I aim for the following actions to take place...
- The window scrolls to the top of that particular image
- All borders are removed (you can refer to the JSFiddle link for a visual example)
- Through AJAX, new content is fetched and displayed beneath the selected image
The challenge I'm facing stems from the need to clear the content above the image. When the page scrolls to the chosen portfolio piece and removes the preceding content, it leads to instability and jitteriness.
Have a look at the following link...
https://jsfiddle.net/oterdwn1/
And here's the current state of my JavaScript code...
JS
$('a.video').on('click', function(e) {
'use strict';
e.preventDefault();
if ($('.hero-pane').css('overflow') == 'hidden') {
return false;
}
var dstn = $(this).attr('href');
var className = $(this).data('class');
var tgt = $(this);
$('.studies a').each(function() {
$('.hero-pane').css({
opacity: 0
});
if ($(this).data("class") !== className) {
$(this).hide();
}
})
$('.hero-pane').css('overflow', 'hidden');
$('.hero-pane').css('min-height', '0px');
$('.hero-pane').css('max-height', '1000px');
$('html,body').animate({
scrollTop: (tgt).offset().top
},
800,
function() {
$(tgt).find($('.border-left, .border-right')).css('width', 0);
$(tgt).find($('.border-top, .border-bottom')).css('height', 0);
$('.hero-pane').delay(200).animate({
'max-height': '0px'
}, 100);
$('.hero-pane').delay(200).animate({
'padding-top': '0px'
}, 100);
$('.hero-pane').delay(200).animate({
'padding-bottom': '0px'
}, 100);
$('.studies').delay(1000).animate({
'margin-top': '-100px'
}, 400);
$('html,body').delay(1000).animate({
scrollTop: 0
}, 400, function() {
//$('html, body').css({
// overflow: 'visible',
// height: 'auto'
//});
});
});
$('#' + className + '-study-title').delay(1500).fadeOut(1000, function() {
getPageHTML(dstn, className);
});
});