-1
看看這段代碼。我正在嘗試進行動畫製作，但不知何故，這是不可能的。我只是改變了檢查警報聲明，但仍然無法獲得。警報聲明不起作用
我在做一些愚蠢的事情，我會把我的代碼放在這裏，幫助我。
預期的功能是我將點擊一個圖像，然後它應該動畫，但在這一點上它必須顯示警報語句。
這部分屬於html。
<div class="content_area">
<div class="image5" id="5" style="display:none;width:40%;height:80%;">
<img src="img/5.jpg" id="leftImage">
</div>
<div class="image6" id="6" style="display:none;width:40%;height:80%;">
<img src="img/6.jpg" id="leftImage">
</div>
<div class="image7" id="7" style="display:none;width:40%;height:80%;">
<img src="img/7.jpg" id="leftImage">
</div>
<div class="image8" id="8" style="display:none;width:40%;height:80%;">
<img src="img/8.jpg" id="leftImage">
</div>
<div class="image9" id="9" style="display:none;width:40%;height:80%;">
<img src="img/9.jpg" id="leftImage">
</div>
<div class="image10" id="10" style="display:none;width:40%;height:80%;">
<img src="img/10.jpg" id="leftImage">
</div>
<div class="gallery-wrapper" id="scrollimage" style="white-space:nowrap;overflow:hidden;line-height:0;">
<img src="img/gallery/5.jpg" class="div-image1" id="5"/><img src="img/gallery/6.jpg" class="div-image2" id="6"/><img src="img/gallery/7.jpg" class="div-image3" id="7"/><img src="img/gallery/8.jpg" class="div-image4" id="8"/><img src="img/gallery/9.jpg" class="div-image5" id="9"/><img src="img/gallery/10.jpg" class="div-image6" id="10"/>
</div>
<div class="div-slide-effect">
</div>
</div>
這裏是JavaScript部分來自custom.js
jQuery(document).ready(function() {
$('.div-image1').click(function() {
alert("Hi");
$('.image5').show();
$('.gallery-wrapper').hide();
// $("#"+plan_image_id_slct).animate({ width: content_width-500 , height: 600 }, 500, "linear");
});
});
Here is the full custom.js
/*-----------------------------------------------------------------------------------*/
/* SLIDE OUT CONTENTS FOR THE PAGES (WORLD ABOVE THE WORLD)
/*-----------------------------------------------------------------------------------*/
$(window).load(function() {
$('.left_black_out').animate({
left: '225'
}, 1000);
});
/*-----------------------------------------------------------------------------------*/
/* MOUSE HOVER CHANGE OPACITY : HOME PAGE
/*-----------------------------------------------------------------------------------*/
jQuery(document).ready(function($){
$('.div-image').each(function() {
$(this).hover(
function() {
$(this).stop().animate({opacity: .8}, 800);
},
function() {
$(this).stop().animate({opacity: 1}, 800);
})
});
});
/*-----------------------------------------------------------------------------------*/
/* CLICK AND INCREASE IMAGE SIZE : PLAN PAGE
/*-----------------------------------------------------------------------------------*/
jQuery(document).ready(function() {
$('.plan-image').click(function() {
var plan_image_id_not_slct = 0;
var plan_image_id_slct = $(this).attr('id');
var current_width = $("#"+plan_image_id_slct).width();
var content_width = $(".content_area").width();
if (plan_image_id_slct == 1)
{
$('.plan-wrapper').hide();
/*$('.leftpart-plan').show();*/
$('.leftpart-plan').show().animate({ width: content_width-400 , height: 600 }, 500, "linear");
/*plan_image_id_not_slct = 2;
$("#"+plan_image_id_not_slct).fadeOut();
$("#"+plan_image_id_slct).animate({ width: content_width-500 , height: 600 }, 500, "linear");*/
}
else
{
$('.plan-wrapper').hide();
$('.rightpart-plan').show().animate({ width: content_width-400 , height: 600 , left : '600px' }, 500);;
/*plan_image_id_not_slct = 1;
$("#"+plan_image_id_not_slct).fadeOut();
$("#"+plan_image_id_slct).animate({ width: content_width-500 , height: 600 , left : 400 }, 500);*/
}
});
});
/*-----------------------------------------------------------------------------------*/
/* CLICK AND DECREASE IMAGE SIZE : PLAN PAGE
/*-----------------------------------------------------------------------------------*/
jQuery(document).ready(function() {
$('.leftpart-plan').click(function() {
$('.plan-wrapper').show();
$('.leftpart-plan').hide();
});
$('.rightpart-plan').click(function(){
$('.plan-wrapper').show();
$('.rightpart-plan').hide();
});
});
/*-----------------------------------------------------------------------------------*/
/* CLICK AND START SLIDE SHOW : HOME PAGE
/*-----------------------------------------------------------------------------------*/
jQuery(document).ready(function() {
var $slideid = 0;
function slideSwitch() {
$('.div-slide-effect').css({left : '-700px'});
$('.div-slide-effect').animate({left: '1800px'}, 2000);
var $active = $('.slideshow IMG.active');
if ($active.length == 0) $active = $('.slideshow IMG:last');
var $next = $active.next().length ? $active.next(): $('.slideshow IMG:first');
$active.addClass('last-active');
$next.css({opacity: 0.0}).addClass('active').animate({opacity: 1.0}, 2000, function() {$active.removeClass('active last-active');});
}
/*Hide gallery image and start Slide*/
$('.div-image').click(function() {
$('.div-image').hide();
$('.slideshow').show();
$slideid = setInterval(function(){slideSwitch()},6000);
});
/*show gallery image and stop Slide*/
$('.slideshow').click(function() {
$('.div-image').show();
$('.slideshow').hide();
clearInterval($slideid);
});
});
/*-----------------------------------------------------------------------------------*/
/* Menu slide in
/*-----------------------------------------------------------------------------------*/
$(document).ready(function()
{
$('.left_black').click(function()
{
$(this).animate({left:-50}, {duration:1000, easing:"easeOutQuart"});
$('.left_black_out').animate({left:0}, {duration:1000, easing:"easeOutQuart"});
});
// for Second menu In
$('.left_black_out img').click(function()
{
if($('.left_black_out').css('left') == '225px'){
$('.left_black_out').animate({ left : -660},{duration:1000, easing:"easeOutQuart"});
} else {
$('.left_black_out').animate({ left : 225},{duration:1000, easing:"easeOutQuart"});
}
});
});
/*-----------------------------------------------------------------------------------*/
/* LOADER
/*-----------------------------------------------------------------------------------*/
jQuery(document).ready(function($){
'use strict';
$('body').prepend('<div id="spinningSquaresG"><div id="spinningSquaresG_1" class="spinningSquaresG"></div><div id="spinningSquaresG_2" class="spinningSquaresG"></div><div id="spinningSquaresG_3" class="spinningSquaresG"></div><div id="spinningSquaresG_4" class="spinningSquaresG"></div><div id="spinningSquaresG_5" class="spinningSquaresG"></div><div id="spinningSquaresG_6" class="spinningSquaresG"></div><div id="spinningSquaresG_7" class="spinningSquaresG"></div><div id="spinningSquaresG_8" class="spinningSquaresG"></div></div>');
});
jQuery(window).load(function($){
jQuery('body').find('#spinningSquaresG').remove();
jQuery('.content').animate({'opacity' : '1'}, 500);
});
/*-----------------------------------------------------------------------------------*/
/* MOBILE NAV
/*-----------------------------------------------------------------------------------*/
jQuery(document).ready(function($){
'use strict';
$('#mobile-nav').click(function(){
$("html, body").animate({scrollTop: 0}, 200);
setTimeout(function(){
$('header').toggleClass('active');
$('#mobile-nav').toggleClass('active');
}, 200);
});
});
/*-----------------------------------------------------------------------------------*/
/* NAVIGATION ACTIVE
/*-----------------------------------------------------------------------------------*/
jQuery(document).ready(function($){
'use strict';
$('nav a[href^="' + location.pathname.split("/")[2] + '"]').addClass('active').parents('li').children('a').addClass('active');
});
/*-----------------------------------------------------------------------------------*/
/* SLIDER
/*-----------------------------------------------------------------------------------*/
jQuery(document).ready(function($){
'use strict';
$(".rslides").responsiveSlides({
speed: 500,
timeout: 4000,
pager: true
});
});
/*-----------------------------------------------------------------------------------*/
/* ISOTOPE
/*-----------------------------------------------------------------------------------*/
jQuery(window).load(function($){
'use strict';
jQuery('ul.grid').isotope({
itemSelector : 'li',
transformsEnabled : false
});
jQuery('.filters a').click(function(){
var filter = jQuery(this).attr('data-href');
jQuery('.filters li').removeClass('active');
jQuery(this).parent().addClass('active');
jQuery('ul.grid').isotope({filter: filter});
jQuery(window).trigger('resize');
return false;
});
jQuery(window).smartresize(function(){
jQuery('ul.grid').isotope('reLayout');
});
jQuery(window).trigger('resize');
jQuery('header').height(jQuery(document).height());
jQuery(window).resize(function(){
jQuery('header').height(jQuery(window).height());
setTimeout(function(){
jQuery('header').height(jQuery(document).height());
}, 900);
});
});
/*-----------------------------------------------------------------------------------*/
/* HOVER DIR
/*-----------------------------------------------------------------------------------*/
jQuery(document).ready(function($){
'use strict';
$(function(){
$('ul.grid.portfolio li, .more-hover').each(function() {$(this).hoverdir();});
});
});
/*-----------------------------------------------------------------------------------*/
/* GALLERY HOVER
/*-----------------------------------------------------------------------------------*/
jQuery(document).ready(function($){
'use strict';
$('.gallery.animate li').hover(function(){
$('.gallery li').not(this).stop().animate({'opacity' : '0.3'}, 200);
}, function(){
$('.gallery li').stop().animate({'opacity' : '1'}, 200);
});
});
/*-----------------------------------------------------------------------------------*/
/* AJAX PORTFOLIO
/*-----------------------------------------------------------------------------------*/
jQuery(document).ready(function($){
'use strict';
$('body').on('click', 'ul.grid li a, .gallery-wrapper a', function(){
var url = $(this).attr('href');
$('.content').prepend('<div id="spinningSquaresG"><div id="spinningSquaresG_1" class="spinningSquaresG"></div><div id="spinningSquaresG_2" class="spinningSquaresG"></div><div id="spinningSquaresG_3" class="spinningSquaresG"></div><div id="spinningSquaresG_4" class="spinningSquaresG"></div><div id="spinningSquaresG_5" class="spinningSquaresG"></div><div id="spinningSquaresG_6" class="spinningSquaresG"></div><div id="spinningSquaresG_7" class="spinningSquaresG"></div><div id="spinningSquaresG_8" class="spinningSquaresG"></div></div>');
$.get(url, function(data){
var filtered = jQuery(data).filter('section').removeClass('content');
$(filtered).find(".rslides").responsiveSlides({
speed: 500,
timeout: 4000,
pager: true
});
$(filtered).imagesLoaded(function(){
$('ul.grid, .gallery-wrapper').animate({'left' : '-100%', 'opacity' : '0'}, function(){
$('ul.grid, .gallery-wrapper').css('max-height', '0px');
$("html, body").animate({scrollTop: 0}, 200);
$('#loader').html(filtered);
$('#spinningSquaresG').remove();
$('#loader').slideDown(function(){
jQuery(window).trigger('resize');
});
});
});
});
return false;
});
$('body').on('click', '.post-nav', function(){
var url = $(this).attr('href');
$('.content').prepend('<div id="spinningSquaresG"><div id="spinningSquaresG_1" class="spinningSquaresG"></div><div id="spinningSquaresG_2" class="spinningSquaresG"></div><div id="spinningSquaresG_3" class="spinningSquaresG"></div><div id="spinningSquaresG_4" class="spinningSquaresG"></div><div id="spinningSquaresG_5" class="spinningSquaresG"></div><div id="spinningSquaresG_6" class="spinningSquaresG"></div><div id="spinningSquaresG_7" class="spinningSquaresG"></div><div id="spinningSquaresG_8" class="spinningSquaresG"></div></div>');
$.get(url, function(data){
var filtered = jQuery(data).filter('section').removeClass('content');
$(filtered).find(".rslides").responsiveSlides({
speed: 500,
timeout: 4000,
pager: true
});
$(filtered).imagesLoaded(function(){
$('#loader').animate({'left' : '-100%', 'opacity' : '0'}, function(){
$("html, body").animate({scrollTop: 0}, 200);
$('#spinningSquaresG').remove();
$('#loader').html(filtered).animate({'left' : '0', 'opacity' : '1'});
});
});
});
return false;
});
$('body').on('click', 'a.close', function(){
$('#loader').slideUp(function(){
$('ul.grid, .gallery-wrapper').css('max-height', '');
$('ul.grid, .gallery-wrapper').animate({'left' : '0', 'opacity' : '1'},function(){
jQuery(window).trigger('resize');
});
});
return false;
});
});
/*-----------------------------------------------------------------------------------*/
/* VERTICAL GALLERY
/*-----------------------------------------------------------------------------------*/
jQuery(window).load(function($){
'use strict';
if(jQuery('#vertical').length > 0){
var sly = new Sly(jQuery('#vertical'), {
horizontal: 1,
itemNav: 'basic',
smart: 1,
activateOn: 'click',
mouseDragging: 1,
touchDragging: 1,
releaseSwing: 1,
startAt: 0,
scrollBy: 1,
activatePageOn: 'click',
speed: 300,
elasticBounds: 1,
dragHandle: 1,
dynamicHandle: 1,
clickBar: 1,
}).init();
jQuery(window).resize(function(){
sly.reload();
});
}
});
/*-----------------------------------------------------------------------------------*/
/* VEIW BACKGROUND
/*-----------------------------------------------------------------------------------*/
jQuery(document).ready(function($){
'use strict';
$('.view-background').click(function(){
if($('.content').css('left') == '0px'){
$('.content').animate({'left' : '-100%', 'opacity' : '0'});
$('.view-background').html('<i class="icon-eye-open icon-2x"></i>');
} else {
$('.content').animate({'left' : '0', 'opacity' : '1'});
$('.view-background').html('<i class="icon-eye-close icon-2x"></i>');
}
return false;
});
});
/*-----------------------------------------------------------------------------------*/
/* TABS
/*-----------------------------------------------------------------------------------*/
jQuery(document).ready(function($){
'use strict';
$('.tab-container').easytabs();
});
/*-----------------------------------------------------------------------------------*/
/* ALERTS
/*-----------------------------------------------------------------------------------*/
jQuery(document).ready(function($){
'use strict';
$('.alert i').click(function(){
$(this).parent().slideUp();
});
});
/*-----------------------------------------------------------------------------------*/
/* ACCORDION
/*-----------------------------------------------------------------------------------*/
jQuery(document).ready(function($){
'use strict';
$('.accordion > dd.active').show();
$('.accordion > dt > a').click(function() {
if($(this).parent().hasClass('active')){
$(this).parents('.accordion').find('dt').removeClass('active');
$(this).parents('.accordion').find('dd').removeClass('active').slideUp();
return false;
} else {
$(this).parents('.accordion').find('dt').removeClass('active');
$(this).parents('.accordion').find('dd').removeClass('active').slideUp();
$(this).parent().addClass('active').next().addClass('active').slideDown();
return false;
}
});
});
/*-----------------------------------------------------------------------------------*/
/* CONTACT FORM
/*-----------------------------------------------------------------------------------*/
jQuery(document).ready(function($){
'use strict';
//CONTACT FORM
$('#contactform').submit(function(){
var action = $(this).attr('action');
$("#message").slideUp(750,function() {
$('#message').hide();
$('#submit').attr('disabled','disabled');
$.post(action, {
name: $('#name').val(),
email: $('#email').val(),
website: $('#website').val(),
comments: $('#comments').val()
},
function(data){
document.getElementById('message').innerHTML = data;
$('#message').slideDown('slow');
$('#submit').removeAttr('disabled');
if(data.match('success') != null) $('#contactform').slideUp('slow');
$(window).trigger('resize');
}
);
});
return false;
});
});
/* */
/* FOR GALLERY
/**/
jQuery(document).ready(function() {
$('.div-image1').click(function() {
alert("Hi");
$('.image5').show();
$('.gallery-wrapper').hide();
// $("#"+plan_image_id_slct).animate({ width: content_width-500 , height: 600 }, 500, "linear");
});
});
這裏是日誌
Uncaught TypeError: Object [object Object] has no method 'responsiveSlides' custom.js:193
Failed to load resource file:///C:/Users/MAIBAMA/Desktop/imperial_dev/font/manksans-medium.woff
event.returnValue is deprecated. Please use the standard event.preventDefault() instead.
Uncaught TypeError: Object [object Object] has no method 'isotope' custom.js:206
Failed to load resource file:///C:/Users/MAIBAMA/Desktop/imperial_dev/js-disclaimer/jquery.min.map
Failed to load resource file:///C:/Users/MAIBAMA/Desktop/imperial_dev/js-disclaimer/jquery.min.map
Failed to load resource file:///C:/Users/MAIBAMA/Desktop/imperial_dev/js-disclaimer/jquery.min.map
sry關於剛剛編輯 –
請參閱下面的JS代碼:) –
你真的混合'jQuery'和'$'？ – thefourtheye