質問編集履歴

1

if文の中のJQueryの処理内容の詳細 if(e.matches)の処理がelseの方でも反映されてしまいます

2021/05/29 15:31

投稿

ryoma26
ryoma26

スコア6

test CHANGED
File without changes
test CHANGED
@@ -28,12 +28,302 @@
28
28
 
29
29
  //jQueryの処理
30
30
 
31
+ $(function(){
32
+
33
+
34
+
35
+ $("#bg-img").fadeIn(3000);
36
+
37
+ $(".smartheader button").hide();
38
+
39
+ $("header nav ul").show();
40
+
41
+ $(".pink p").hover(function(){
42
+
43
+ $(this).animate({"padding":"80px 60px"},300),
44
+
45
+ $("body").append('<div class="designtrip"></div>'),
46
+
47
+ $("body").append('<div class="design"><p></p></div>');
48
+
49
+ $(".design").css("top",$(this).offset().top+$(this).parent().height()+100);
50
+
51
+ $(".design").css("left","270px");
52
+
53
+ $(".designtrip").css("left",$(this).offset().left+70);
54
+
55
+ $(".designtrip").css("top",$(this).offset().top+$(this).parent().height()+52);
56
+
57
+
58
+
59
+ $(".design p").html($(this).parent().attr("alt"));
60
+
61
+
62
+
63
+ },function(){
64
+
65
+ $(this).animate({"padding":"60px 40px"},300),
66
+
67
+ $(".design").fadeOut(300),$(".designtrip").fadeOut(300);
68
+
69
+ $("design").remove(),
70
+
71
+ $("designtrip").remove();
72
+
73
+ });
74
+
75
+ $(".yellow p").hover(function(){
76
+
77
+ $(this).animate({"padding":"80px 40px"},300),
78
+
79
+ $("body").append('<div class="designtrip"></div>'),
80
+
81
+ $("body").append('<div class="design"><p></p></div>');
82
+
83
+ $(".design").css("top",$(this).offset().top+$(this).parent().height()+100);
84
+
85
+ $(".design").css("left","270px");
86
+
87
+ $(".designtrip").css("left",$(this).offset().left+58);
88
+
89
+ $(".designtrip").css("top",$(this).offset().top+$(this).parent().height()+52);
90
+
91
+ $(".design p").html($(this).parent().attr("alt"));
92
+
93
+
94
+
95
+ },function(){
96
+
97
+ $(this).animate({"padding":"60px 20px"},300),
98
+
99
+ $(".design").fadeOut(300),$(".designtrip").fadeOut(300);
100
+
101
+ $("design").remove(),
102
+
103
+ $("designtrip").remove();
104
+
105
+ });
106
+
107
+ $(".blue p").hover(function(){
108
+
109
+ $(this).animate({"padding":"80px 50px"},300),
110
+
111
+ $("body").append('<div class="designtrip"></div>'),
112
+
113
+ $("body").append('<div class="design"><p></p></div>');
114
+
115
+ $(".design").css("top",$(this).offset().top+$(this).parent().height()+100);
116
+
117
+ $(".design").css("left","270px");
118
+
119
+ $(".designtrip").css("left",$(this).offset().left+40);
120
+
121
+ $(".designtrip").css("top",$(this).offset().top+$(this).parent().height()+52);
122
+
123
+ $(".design p").html($(this).parent().attr("alt"));
124
+
125
+
126
+
127
+ },function(){
128
+
129
+ $(this).animate({"padding":"60px 30px"},300),
130
+
131
+ $(".design").fadeOut(300),$(".designtrip").fadeOut(300);
132
+
133
+ $("design").remove(),
134
+
135
+ $("designtrip").remove();
136
+
137
+ });
138
+
139
+ // work
140
+
141
+ $(".workimg a").append("<div>");
142
+
143
+ $(".workimg a div").each(function(){
144
+
145
+ $(this).html("<p>"+$(this).parent().children("img").attr("alt")+"</p>");
146
+
147
+ $(this).children("p").css("top",$(this).height()/3);
148
+
149
+ });
150
+
151
+ $(".workimg a").hover(function(){
152
+
153
+ $(this).children("div").stop().fadeIn();
154
+
155
+ },function(){
156
+
157
+ $(this).children("div").stop().fadeOut();
158
+
159
+ });
160
+
161
+
162
+
163
+ // contact
164
+
165
+ $(".alert").hide();
166
+
167
+ $(".button").click(function(){
168
+
169
+ var sendFlag=true;
170
+
171
+ if(!$(".name").val()){
172
+
173
+ $(".form-text .alert").show();
174
+
175
+
176
+
177
+ sendFlag=false;
178
+
179
+ }
180
+
181
+ else{
182
+
183
+ $(".form-text .alert").hide();
184
+
185
+ }
186
+
187
+ if(!$("#email").val()){
188
+
189
+ $(".form-mail .alert").show();
190
+
191
+ sendFlag=false;
192
+
193
+ }
194
+
195
+ else{
196
+
197
+ $(".form-mail .alert").hide();
198
+
199
+ }
200
+
201
+
202
+
203
+ if(!$("#message").val()){
204
+
205
+ $(".form-message .alert").show();
206
+
207
+ sendFlag=false;
208
+
209
+ }
210
+
211
+ else{
212
+
213
+ $(".form-message .alert").hide();
214
+
215
+ }
216
+
217
+
218
+
219
+ if(sendFlag==false){
220
+
221
+ return false;
222
+
223
+ }
224
+
225
+ });
226
+
227
+
228
+
229
+ });
230
+
231
+ }
232
+
31
233
  }
32
234
 
33
235
  else{
34
236
 
35
237
    //jQueryの処理
36
238
 
239
+ //HOME
240
+
241
+ $("header button").show();
242
+
243
+ $("header button").click(function(){
244
+
245
+ $("nav ul").stop().slideToggle(200);
246
+
247
+ $("form .button").css("left",$(window).width()/2-$("form .button").width()/2);
248
+
249
+ });
250
+
251
+
252
+
253
+
254
+
255
+ // contact
256
+
257
+ $(".alert").hide();
258
+
259
+ $(".button").click(function(){
260
+
261
+ var sendFlag=true;
262
+
263
+ if(!$(".name").val()){
264
+
265
+ $(".form-text .alert").show();
266
+
267
+
268
+
269
+ sendFlag=false;
270
+
271
+ }
272
+
273
+ else{
274
+
275
+ $(".form-text .alert").hide();
276
+
277
+ }
278
+
279
+ if(!$("#email").val()){
280
+
281
+ $(".form-mail .alert").show();
282
+
283
+ sendFlag=false;
284
+
285
+ }
286
+
287
+ else{
288
+
289
+ $(".form-mail .alert").hide();
290
+
291
+ }
292
+
293
+
294
+
295
+ if(!$("#message").val()){
296
+
297
+ $(".form-message .alert").show();
298
+
299
+ sendFlag=false;
300
+
301
+ }
302
+
303
+ else{
304
+
305
+ $(".form-message .alert").hide();
306
+
307
+ }
308
+
309
+
310
+
311
+ if(sendFlag==false){
312
+
313
+ return false;
314
+
315
+ }
316
+
317
+ });
318
+
319
+
320
+
321
+ });
322
+
323
+
324
+
325
+
326
+
37
327
  }
38
328
 
39
329
  }